/* =========================================================================
WSR Custom — CONSOLIDATED overrides.css
Single update-proof stylesheet for Website Rescue. Lives in
wp-content/mu-plugins/wsr-custom/assets/overrides.css, enqueued at
priority 999 (filemtime cache-bust). Survives all theme/plugin/core updates.
Consolidated 2026-08-11 from these sources (see reports/CSS-REPORT.md):
[CT] child-theme/style.css (theme stylesheet — structural + a
merged copy of the plugin overrides,
trust-strip, component library)
[OV] mu-plugins/.../overrides.css (LIVE mu-plugin — currently wins on
load order; sole source of the page-id
element-ID glow blocks + Overwatch 3973)
[TS] mu-plugins/.../trust-strip.css (homepage trust strip base)
[SC] child-theme/css/scan.css (scanner page)
[ST] reports/stranded-customizer-and-footer.css (Customizer + Footer V2)
EXCLUDED (documented DEAD / superseded — see report §c):
wsr-anim-v2.css — 100% superseded by the live .wsr-anim framework (§14)
wsr-id-targeted.css — page-3973 layout, not enqueued; conflicts with the
live Overwatch block (§11). Element-IDs catalogued in report.
wsr-new-pages.css — empty.
RULE #9: one definition per selector. Conflicts resolved to the currently-
winning (later-loaded / more-specific / !important) value; all logged in report §c.
ELEMENT-ID DEBT: every .elementor-element-* / #elementor-element-* selector is
tagged with a "TODO element-id -> stable wsr-* class" comment and catalogued in report §b.
Kept verbatim this phase to preserve behaviour; converted on the running site later.
url() PATHS: theme/plugin asset paths are stylesheet-relative (img/…, fonts/…) so
the plugin is portable at any install path incl. WP Staging subdirectories. Paths
into wp-content/uploads on the old webappdesigns.com dev host CANNOT be safely
relativised (not our assets) — kept verbatim and FLAGGED in report §d.
Ship alongside this file: assets/img/ and assets/fonts/ (see report §d).
========================================================================= */
/* =========================================================================
0. STRUCTURAL [CT] (was the child-theme theme-stylesheet head)
CASCADE RISK: these loaded as the THEME stylesheet (early). Moved into this
enqueued file (priority 999, late) they now load LATER — see report §d.
========================================================================= */
body { overflow: hidden; }
:root { overflow-x: hidden; }
.site-header .site-navigation { flex: 1; }
header#site-header {
position: relative;
z-index: 999999;
}
.site-header {
margin-top: 30px !important;
margin-bottom: 0px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.container,
.site-header {
max-width: 90% !important;
margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.site-navigation ul.menu {
align-items: center;
justify-content: center;
gap: 60px;
width: 100%;
}
main#content {
z-index: 1;
position: relative;
}
#content ul:not(.elementor-icon-list-items), #content li, #content ol { margin: 0; padding: 0; }
#content ul:not(.elementor-icon-list-items) { padding-left: 15px; list-style: outside; }
#content ol { padding-left: 10px; }
/* Footer structure (widget-title size handled in §9; .site-footer h2 1rem/400
here is superseded by the 1.6rem/600 !important rule in §9 — see report §c). */
.site-footer { font-size: 0.95rem; padding-top: 4rem; overflow: hidden; }
.site-footer .footer-inner { max-width: 90% !important; padding-left: 15px; padding-right: 15px; }
.site-footer .footer-inner { flex-wrap: unset !important; gap: 30px; }
.site-footer li { list-style: none !important; }
.site-footer ul { padding: 0; }
.site-footer a { color: #E8E6E1; }
.footer-sec1 { width: 35%; }
.footer-sec3 { width: 22%; }
.footer-sec2 { width: 18%; }
@media screen and (max-width: 1199px) {
.site-header .header-inner { max-width: 95%; }
.site-footer .footer-inner { max-width: 95%; }
}
@media screen and (max-width: 1025px) {
.container, .site-header,
.site-footer .footer-inner,
.site-main:has(.case-studies-banner) {
max-width: 100% !important;
}
}
@media screen and (max-width: 991px) {
.site-footer .footer-inner { flex-direction: column; justify-content: center; }
.footer-sec1, .footer-sec2, .footer-sec3, .footer-sec4 { width: 100%; }
}
/* =========================================================================
1. SITE-WIDE [OV/CT] body, banner washes, typography/fonts, utilities
========================================================================= */
body { position: relative; }
/* Hide SVG glow-circle widgets on ALL pages — replaced by CSS pseudo-glows */
.elementor-widget-image:has(img[src*="Circle_Left"]),
.elementor-widget-image:has(img[src*="Circle_Right"]),
.elementor-widget-image:has(img[src*="Full_Circle"]),
.elementor-widget-image:has(img[src*="circle_left"]),
.elementor-widget-image:has(img[src*="circle_right"]),
.elementor-widget-image:has(img[src*="full_circle"]) {
display: none !important;
}
body::before {
content: '';
position: absolute;
left: 0;
top: 0;
background-image: url(img/Inner-Page-Banner.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
height: 595px;
width: 100%;
}
/* Homepage: full-width vivid orange-red wash — #db3c1a per Figma */
body.home::before {
background-image: none !important;
background: linear-gradient(180deg,
rgba(219, 60, 26, 0.75) 0%,
rgba(219, 60, 26, 0.50) 30%,
rgba(219, 60, 26, 0.25) 55%,
rgba(28, 28, 28, 0) 85%) !important;
height: 900px !important;
width: 100% !important;
}
/* Green wash pages: About, Pricing, Certificate */
body.page-id-2558::before,
body.page-id-2910::before,
body.page-id-1389::before {
background-image: none !important;
background: linear-gradient(180deg,
rgba(2, 208, 90, 0.55) 0%,
rgba(2, 208, 90, 0.35) 30%,
rgba(2, 208, 90, 0.15) 55%,
rgba(28, 28, 28, 0) 85%) !important;
height: 700px !important;
top: 0;
}
/* Red/orange wash pages: Case Studies (Proof), Threats */
body.page-id-760::before,
body.page-id-1234::before {
background-image: none !important;
background: linear-gradient(180deg,
rgba(219, 60, 26, 0.55) 0%,
rgba(219, 60, 26, 0.35) 30%,
rgba(219, 60, 26, 0.15) 55%,
rgba(28, 28, 28, 0) 85%) !important;
height: 700px !important;
top: 0;
}
/* E-Book — exact same intensity as homepage */
body.page-id-2832::before {
background-image: none !important;
background: linear-gradient(180deg,
rgba(219, 60, 26, 0.75) 0%,
rgba(219, 60, 26, 0.50) 30%,
rgba(219, 60, 26, 0.25) 55%,
rgba(28, 28, 28, 0) 85%) !important;
height: 900px !important;
top: 0;
}
/* Overwatch (3973): green protection wash (from OV §Overwatch) */
body.page-id-3973::before {
background-image: none !important;
background: linear-gradient(180deg,
rgba(2, 208, 90, 0.55) 0%,
rgba(2, 208, 90, 0.35) 30%,
rgba(2, 208, 90, 0.15) 55%,
rgba(28, 28, 28, 0) 85%) !important;
height: 900px !important;
width: 100% !important;
top: 0;
}
/* Homepage: kill permanent green borders on cert comparison parent sections */
/* TODO: element-id -> stable wsr-* class */
.elementor-element-85aa7c8,
.elementor-element-10d65e6 {
border: none !important;
}
/* Homepage: "Without Certification" — green inline text → red */
.wsr-legal-nocert span[style*="02D05A"],
.wsr-legal-nocert span[style*="02d05a"] {
color: rgba(255, 59, 29, 1) !important;
}
.wsr-legal-nocert,
.wsr-legal-withcert {
border: none !important;
position: relative !important;
overflow: visible !important;
}
/* Color utilities */
.red-text { color: rgba(255, 59, 29, 1); }
.grn-text { color: rgba(153, 252, 46, 1); }
.green-gradient-box {
background: linear-gradient(144.16deg, rgba(28, 28, 28, 0.1) 6.82%, rgba(2, 208, 90, 0.45) 85.86%) !important;
}
.border-red-gradient {
border: 1.5px solid !important;
border-image-source: linear-gradient(90deg, #FF3B1D 0%, #DA181B 100%) !important;
}
/* Spacing utilities */
.ptb-90 { padding-top: 90px !important; padding-bottom: 90px !important; }
.pb-90 { padding-bottom: 90px !important; }
.pt-90 { padding-top: 90px !important; }
.mb-0 p { margin-block-end: 0 !important; }
p.mb-12 { margin-bottom: 12px !important; }
.reverse-col { display: flex; flex-direction: column-reverse; }
/* Typography / Fonts — full Alfabet family kept from [CT] (superset).
CONFLICT: [OV] shipped only a single alfabet-light .woff
(Fontspring-DEMO-alfabet-light.woff); dropped in favour of the complete
.otf family so `.change-text`/h2 fallbacks don't lose weights (report §c).
FLAG: ship these .otf files in assets/fonts/ (report §d). */
@font-face { font-family: "Alfabet"; src: url("fonts/alfabet-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alfabet"; src: url("fonts/alfabet-medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alfabet"; src: url("fonts/alfabet-semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Alfabet"; src: url("fonts/alfabet-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alfabet"; src: url("fonts/alfabet-extrabold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Alfabet"; src: url("fonts/alfabet-black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "alfabet-light"; src: url("fonts/alfabet-regular.otf") format("opentype"); font-weight: 300 700; font-style: normal; font-display: swap; }
.text-style2,
.text-style2 p {
font-family: 'alfabet-light' !important;
}
.text-style2 p:last-child { margin-bottom: 0px !important; }
.text-style2 p .red-text,
.text-style2 .grn-text {
font-weight: 600 !important;
}
.change-text { font-family: "Alfabet", Sans-serif; }
.footer-sec3 .textwidget,
.footer-sec1 {
font-family: "Inter Tight", Sans-serif;
}
/* Fade-in animation */
@keyframes fadeinup {
0% { opacity: 0; transform: translate3d(0, 30px, 0); }
100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fade-in-up {
opacity: 0;
transform: translate3d(0, 30px, 0);
will-change: transform, opacity;
}
.fade-in-up.animate {
animation: fadeinup 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.image-hover-effect { overflow: hidden; }
.red-text-box p:has(.red-text) { margin-bottom: 5px; line-height: 1.1em; }
.red-text-box p:last-child { margin-bottom: 0px; }
/* =========================================================================
2. HEADER & NAVIGATION [OV/CT]
========================================================================= */
.site-header .header-inner {
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0 20px;
border-radius: 20px;
height: 95px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(60px);
}
/* Nav: items evenly spread across full width per Figma
(overrides the §0 structural .site-navigation ul.menu — see report §d) */
.site-navigation ul.menu {
justify-content: space-between !important;
gap: 0 !important;
width: 100% !important;
align-items: center !important;
padding-left: 200px !important;
}
.site-header .site-navigation ul.menu li:last-child a {
padding: 12px 30px !important;
background: transparent !important;
}
.site-header .site-navigation ul.menu li a {
transition: all 0.3s ease !important;
text-decoration: none !important;
border-bottom: none !important;
}
.gradient-text .elementor-heading-title,
.site-header .site-navigation ul.menu li a:hover {
background: linear-gradient(293.37deg, #02D05A 10.77%, #99FC2E 79.79%) !important;
background-clip: text !important;
-webkit-text-fill-color: transparent;
}
.site-header .site-navigation ul.menu li.current-menu-item a {
color: #99FC2E !important;
font-weight: 700;
-webkit-text-fill-color: #99FC2E !important;
text-decoration: none !important;
border-bottom: none !important;
}
/* =========================================================================
3. HERO SECTION (homepage banner, buttons) [OV/CT]
========================================================================= */
.banner-text p { display: inline-block; }
.banner-text img { display: inline-block; margin: 0 0px -20px 0; }
.banner-text h1 { display: inline; font-size: 3.3rem !important; }
.home-banner-h1 > .elementor-image-box-wrapper { display: block !important; }
.home-banner-h1 > .elementor-image-box-wrapper > .elementor-image-box-img { float: left !important; }
.home-banner-h1 h1 {
margin: 0 !important;
font-size: 4.4vw !important;
}
/* Button system */
.btn-style,
.ebtn-style a,
.ebtn-style2 a {
border-radius: 12px !important;
padding: 18px 32px !important;
font-size: 1.1rem !important;
text-align: center;
border: none !important;
text-transform: capitalize;
color: #E8E6E1 !important;
display: inline-block;
font-weight: 500 !important;
transition: all 200ms ease-out;
line-height: 1.2em !important;
}
.btn-style,
.ebtn-style a {
background: linear-gradient(272.73deg, #02D05A 0%, #99FC2E 110.62%) !important;
/* astra1 2026-09-11: restore dark labels on bright green buttons. */
color: #1C1C1C !important;
}
.ebtn-style2 a {
background: rgba(0, 0, 0, 0.21) !important;
filter: brightness(1.1);
}
.ebtn-style2 a::before {
content: "";
position: absolute;
inset: 0;
padding: 1.5px;
border-radius: inherit;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: linear-gradient(90deg, #99FC2E 0%, #02D05A 100%) !important;
z-index: -1 !important;
box-sizing: border-box !important;
}
.btn-style:hover,
.ebtn-style a:hover,
.ebtn-style2 a:hover,
.plan-box-wrap:hover,
.icon-text-box .elementor-icon-list-item:hover,
.plan-name:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px #02d05a57 !important;
text-decoration: none !important;
}
.banner-svg-image {
height: 100%;
background: linear-gradient(134.64deg, rgba(28, 28, 28, 0.1) -0.64%, rgba(2, 208, 90, 0.45) 100%);
padding: 20px 30px;
border-radius: 24px;
border: 2px solid rgba(153, 252, 46, 0.3);
backdrop-filter: blur(150px);
}
.banner-svg-image svg { overflow: visible !important; }
/* =========================================================================
4. TRUST STRIP [OV overrides + TS base]
OV rules (this block) override the TS base that follows in §4b.
========================================================================= */
.wsr-trust-strip {
max-width: 82%;
margin: 0 0 0 calc(5% - 45px);
padding: 0px 15px 120px;
margin-top: -100px;
position: relative;
z-index: 2;
}
.wsr-trust-label {
text-align: left;
margin-bottom: 14px;
font-family: "Inter Tight", Sans-serif;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: rgba(153, 252, 46, 0.5);
}
.wsr-trust-label span {
display: inline-block;
padding: 0 20px;
position: relative;
}
.wsr-trust-label span::before,
.wsr-trust-label span::after {
content: '';
position: absolute;
top: 50%;
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(153, 252, 46, 0.3));
}
.wsr-trust-label span::before { right: 100%; }
.wsr-trust-label span::after {
left: 100%;
background: linear-gradient(90deg, rgba(153, 252, 46, 0.3), transparent);
}
.wsr-trust-badges {
display: flex;
justify-content: flex-start;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
max-width: 58%;
}
.wsr-trust-badge {
display: flex;
align-items: center;
gap: 10px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(153, 252, 46, 0.15);
padding: 12px 22px;
border-radius: 50px;
font-family: "Inter Tight", Sans-serif;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
opacity: 0;
transform: translateY(15px);
animation: wsrBadgeIn 0.5s ease forwards;
}
.wsr-trust-badge:nth-child(1) { animation-delay: 0.1s; }
.wsr-trust-badge:nth-child(2) { animation-delay: 0.2s; }
.wsr-trust-badge:nth-child(3) { animation-delay: 0.3s; }
.wsr-trust-badge:nth-child(4) { animation-delay: 0.4s; }
.wsr-trust-badge:nth-child(5) { animation-delay: 0.5s; }
.wsr-trust-badge:nth-child(6) { animation-delay: 0.6s; }
@keyframes wsrBadgeIn {
to { opacity: 1; transform: translateY(0); }
}
.wsr-trust-badge:hover {
border-color: rgba(153, 252, 46, 0.5);
box-shadow: 0 0 20px rgba(2, 208, 90, 0.12), inset 0 0 20px rgba(2, 208, 90, 0.05);
transform: translateY(-3px);
background: rgba(2, 208, 90, 0.08);
}
.wsr-trust-badge-icon {
font-size: 1.1rem;
flex-shrink: 0;
filter: grayscale(0.3);
transition: filter 0.3s ease;
}
.wsr-trust-badge:hover .wsr-trust-badge-icon { filter: grayscale(0); }
.wsr-trust-badge-text { white-space: nowrap; }
.wsr-trust-badge-text strong {
color: rgba(153, 252, 46, 1);
font-weight: 600;
}
/* Testimonial section */
.wsr-testimonials-wrap {
max-width: 50%;
margin: 0;
position: relative;
}
.wsr-testimonials {
position: relative;
min-height: 100px;
}
.wsr-testimonials-inner { padding: 0; position: relative; }
.wsr-corner-br { display: none; }
.wsr-testimonial-status { display: none; }
.wsr-status-dot { display: none; }
.wsr-testimonial {
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
filter: blur(8px);
transform: translateY(8px);
transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
text-align: left;
pointer-events: none;
}
.wsr-testimonial.active {
opacity: 1;
filter: blur(0);
transform: translateY(0);
position: relative;
pointer-events: auto;
}
.wsr-testimonial-bigquote { display: none; }
.wsr-testimonial-quote {
font-family: "Inter Tight", Sans-serif;
font-size: 1.2rem;
line-height: 1.6;
color: #E8E6E1;
font-style: italic;
margin-bottom: 12px;
position: relative;
z-index: 1;
text-align: left;
text-shadow: 0 0 30px rgba(153, 252, 46, 0.12);
}
.wsr-testimonial-meta {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
.wsr-testimonial-author {
font-family: "Inter Tight", Sans-serif;
font-size: 0.9rem;
color: rgba(153, 252, 46, 1);
font-weight: 600;
letter-spacing: 0.02em;
text-shadow: 0 0 15px rgba(153, 252, 46, 0.3);
}
.wsr-testimonial-stars {
font-size: 1rem;
letter-spacing: 2px;
filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}
.wsr-star {
color: rgba(255, 215, 0, 0.3);
transition: color 0.3s ease;
}
.wsr-testimonial.active .wsr-star { color: #FFD700; }
.wsr-testimonial.active .wsr-star:nth-child(1) { transition-delay: 0.3s; }
.wsr-testimonial.active .wsr-star:nth-child(2) { transition-delay: 0.4s; }
.wsr-testimonial.active .wsr-star:nth-child(3) { transition-delay: 0.5s; }
.wsr-testimonial.active .wsr-star:nth-child(4) { transition-delay: 0.6s; }
.wsr-testimonial.active .wsr-star:nth-child(5) { transition-delay: 0.7s; }
.wsr-linkedin-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.4);
margin-left: 8px;
padding: 2px 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.wsr-linkedin-badge svg { width: 12px; height: 12px; fill: #0A66C2; }
/* Progress bar (replaces dots) */
.wsr-testimonial-progress { display: none; }
.wsr-progress-bar {
width: 32px;
height: 3px;
border-radius: 2px;
background: rgba(153, 252, 46, 0.1);
overflow: hidden;
cursor: pointer;
transition: background 0.3s ease;
border: none;
padding: 0;
}
.wsr-progress-bar:hover { background: rgba(153, 252, 46, 0.2); }
.wsr-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #99FC2E, #02D05A);
border-radius: 2px;
transition: width 0.1s linear;
}
.wsr-progress-bar.active .wsr-progress-fill {
animation: wsrProgressFill 6s linear forwards;
}
.wsr-progress-bar.done .wsr-progress-fill { width: 100%; }
@keyframes wsrProgressFill {
from { width: 0%; }
to { width: 100%; }
}
/* Divider */
.wsr-trust-divider {
width: 80px;
height: 1px;
background: linear-gradient(90deg, rgba(153, 252, 46, 0.3), transparent);
margin: 6px 0;
}
.wsr-testimonial-counter { display: none; }
/* Entry animations — triggered by IntersectionObserver */
.wsr-trust-strip .wsr-trust-label {
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.wsr-trust-strip.in-view .wsr-trust-label {
opacity: 1;
transform: translateX(0);
}
.wsr-trust-strip .wsr-trust-badge {
opacity: 0;
transform: translateY(15px) scale(0.95);
}
.wsr-trust-strip.in-view .wsr-trust-badge {
animation: wsrBadgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(1) { animation-delay: 0.15s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(2) { animation-delay: 0.25s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(3) { animation-delay: 0.35s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(4) { animation-delay: 0.45s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(5) { animation-delay: 0.55s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(6) { animation-delay: 0.65s; }
/* CONFLICT: wsrBadgePop also defined in TS with 16px/0.92 keyframes; kept the
[OV] 15px/0.95 version (live winner) — see report §c. */
@keyframes wsrBadgePop {
0% { opacity: 0; transform: translateY(15px) scale(0.95); }
70% { transform: translateY(-3px) scale(1.02); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.wsr-trust-strip .wsr-trust-badge-icon {
transition: transform 0.3s ease;
}
.wsr-trust-strip.in-view .wsr-trust-badge-icon {
animation: wsrIconBounce 0.5s ease forwards;
}
/* CONFLICT: wsrIconBounce also defined in TS (1→1.35→0.9→1); kept the [OV]
0→1.3→1 version (live winner) — see report §c. */
@keyframes wsrIconBounce {
0% { transform: scale(0); }
60% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(1) .wsr-trust-badge-icon { animation-delay: 0.25s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(2) .wsr-trust-badge-icon { animation-delay: 0.35s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(3) .wsr-trust-badge-icon { animation-delay: 0.45s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(4) .wsr-trust-badge-icon { animation-delay: 0.55s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(5) .wsr-trust-badge-icon { animation-delay: 0.65s; }
.wsr-trust-strip.in-view .wsr-trust-badge:nth-child(6) .wsr-trust-badge-icon { animation-delay: 0.75s; }
.wsr-trust-strip .wsr-testimonials-wrap {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s;
}
.wsr-trust-strip.in-view .wsr-testimonials-wrap {
opacity: 1;
transform: translateY(0);
}
/* ---- 4b. TRUST STRIP BASE [TS] (badge/testimonial primitives not in OV) ----
NOTE: .wsr-trust-strip / .wsr-trust-badges / .wsr-testimonials base values
from TS are intentionally OMITTED — the OV block above supersedes them
(report §c). Only the TS-unique .wsr-badge / .wsr-quote / .wsr-author
primitives + TS keyframes are kept here. */
.wsr-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
border-radius: 50px;
background: #000;
border: 1px solid rgba(153, 252, 46, 0.25);
color: #E8E6E1;
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
}
.wsr-badge em {
color: #99FC2E;
font-style: normal;
font-weight: 700;
}
.wsr-badge.wsr-visible { animation: wsrBadgePop 0.5s ease forwards; }
.wsr-badge .wsr-badge-icon { font-size: 1.1rem; line-height: 1; }
.wsr-badge.wsr-visible .wsr-badge-icon { animation: wsrIconBounce 0.6s ease 0.3s both; }
.wsr-quote {
color: #E8E6E1;
font-size: 1.2rem;
font-style: italic;
line-height: 1.6;
margin: 0 0 12px;
text-shadow: 0 0 20px rgba(2, 208, 90, 0.15);
}
.wsr-quote::before {
content: "\201C";
font-size: 2rem;
color: #99FC2E;
margin-right: 4px;
vertical-align: -0.15em;
}
.wsr-author {
color: #99FC2E;
font-weight: 700;
font-size: 0.95rem;
}
.wsr-author .wsr-star { text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }
@keyframes wsrFadeUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* =========================================================================
5. ATTACK SECTION (red glows, tabs, vulnerability boxes) [OV/CT]
========================================================================= */
.wsr-attack-section {
position: relative !important;
overflow: visible !important;
}
.wsr-attack-section::before {
content: "" !important;
position: absolute !important;
left: -900px !important;
top: 200px !important;
width: 900px !important;
height: 900px !important;
border-radius: 50% !important;
pointer-events: none !important;
z-index: -1 !important;
background: transparent !important;
box-shadow:
0 0 600px 400px rgba(218, 24, 27, 0.25),
0 0 300px 200px rgba(255, 59, 29, 0.18) !important;
}
.wsr-attack-section::after {
content: "" !important;
position: absolute !important;
right: calc(15% + 350px) !important;
top: calc(50% - 100px) !important;
width: 700px !important;
height: 700px !important;
transform: translate(50%, -50%) !important;
border-radius: 50% !important;
pointer-events: none !important;
z-index: -1 !important;
background: transparent !important;
box-shadow:
0 0 400px 300px rgba(218, 24, 27, 0.2),
0 0 200px 150px rgba(255, 59, 29, 0.15) !important;
}
/* 9 vulnerability boxes — red gradient + border.
CONFLICT: [CT] had this base block "DRAGNET OFF" (commented out); [OV] has it
ACTIVE and loads later → active is what renders. Kept ACTIVE (report §c). */
.al-box-wrap > .elementor-element {
background: linear-gradient(103.84deg, rgba(0, 0, 0, 0.15) 6.18%, rgba(218, 24, 27, 0.2) 97.68%) !important;
backdrop-filter: blur(50px);
border: 2px solid rgba(200, 16, 19, 0.5) !important;
transition: background 0.3s ease-out !important;
overflow: hidden;
position: relative;
}
.al-box-wrap > .elementor-element::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(103.84deg, rgba(0, 0, 0, 0.15) 6.18%, rgba(218, 24, 27, 0.67) 97.68%);
opacity: 0;
z-index: 0;
transition: opacity 0.3s ease-out !important;
border: none !important;
backdrop-filter: unset !important;
}
.al-box-wrap > .elementor-element:hover::before { opacity: 1; }
.al-box-wrap h3 {
color: rgba(255, 59, 29, 1) !important;
-webkit-text-fill-color: rgba(255, 59, 29, 1) !important;
}
.ai-attacks-section .grn-text,
body.home h2 .grn-text:only-child {
color: rgba(255, 59, 29, 1) !important;
-webkit-text-fill-color: rgba(255, 59, 29, 1) !important;
}
.ai-attacks-section .al-text-div {
max-width: 670px;
position: absolute;
top: 43%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Red tabs — threat content.
FLAG (report §d): tab icons point to wp-content/uploads on the old
webappdesigns.com dev host — NOT our assets, cannot be relativised. */
.red-tabs .e-n-tab-title[aria-selected="false"] .e-n-tab-title-text::before {
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url('img/tab-icon.png') no-repeat center center;
background-size: 30px;
margin-right: 10px;
}
.red-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text::before {
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url('img/tab-act-icon.png') no-repeat center center;
background-size: 30px;
margin-right: 10px;
}
.red-tabs .e-n-tabs-heading { justify-content: space-evenly !important; gap: 20px; }
.red-tabs .e-n-tabs-heading > .e-n-tab-title {
transition: all 0.3s ease !important;
text-decoration: none !important;
border-bottom: none !important;
min-width: calc((100% - 80px)/5) !important;
}
.red-tabs .e-n-tabs-content > div {
padding-left: 0px !important;
padding-right: 0px !important;
}
.red-tabs .e-n-tab-title[aria-selected="true"] {
background: rgb(200, 30, 20) !important;
border-color: rgba(255, 59, 29, 0.8) !important;
color: #E8E6E1 !important;
}
.red-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
color: #E8E6E1 !important;
}
.red-tabs .e-n-tab-title[aria-selected="false"] {
background: rgba(28, 28, 28, 0.8) !important;
border-color: rgba(80, 80, 80, 0.3) !important;
color: rgba(255, 59, 29, 0.7) !important;
transition: all 0.3s ease !important;
}
.red-tabs .e-n-tab-title[aria-selected="false"] .e-n-tab-title-text {
color: rgba(255, 59, 29, 0.7) !important;
}
.red-tabs .e-n-tab-title[aria-selected="false"]:hover {
background: rgba(255, 80, 20, 0.6) !important;
border-color: rgba(255, 100, 20, 0.8) !important;
color: #E8E6E1 !important;
}
.red-tabs .e-n-tab-title[aria-selected="false"]:hover .e-n-tab-title-text {
color: #E8E6E1 !important;
}
.red-tabs .e-n-tabs-content > .e-n-tab-content {
border-color: rgba(200, 16, 19, 0.5) !important;
background: linear-gradient(144.16deg, rgba(28, 28, 28, 0.1) 6.82%, rgba(218, 24, 27, 0.3) 85.86%) !important;
}
.red-tabs .e-n-tabs-content .e-con {
border: 1px solid rgba(255, 40, 20, 0.8) !important;
border-radius: 12px !important;
background: linear-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(218, 24, 27, 0.2) 100%) !important;
transition: all 0.3s ease !important;
}
.red-tabs .e-n-tabs-content .e-con .e-con {
border: none !important;
background: none !important;
box-shadow: none !important;
}
.red-tabs .e-n-tabs-content > .e-n-tab-content > .e-con:hover {
border-color: rgba(180, 0, 0, 0.9) !important;
background: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(180, 0, 0, 0.45) 100%) !important;
box-shadow: 0 0 80px rgba(180, 0, 0, 0.35), inset 0 0 100px rgba(180, 0, 0, 0.15) !important;
}
.red-tabs .e-n-tabs-content > .e-n-tab-content {
border: none !important;
box-shadow: 0 0 40px rgba(218, 24, 27, 0.15), inset 0 0 60px rgba(218, 24, 27, 0.08) !important;
}
.red-tabs .e-n-tabs-content {
border-color: rgba(200, 16, 19, 0.4) !important;
}
.red-tabs .e-n-tabs-content h3 {
margin-top: 0px !important;
font-size: 2.5rem !important;
}
.border-red-arrow { margin-top: auto !important; }
.border-red-arrow a {
border-radius: 0px !important;
border-bottom-width: 2px !important;
font-weight: 500 !important;
}
/* Push "The Attack Nobody's Warning You About" heading down */
/* TODO: element-id -> stable wsr-* class */
.elementor-element-b280d0f {
margin-top: 200px !important;
}
/* =========================================================================
6. CONTENT SECTIONS (step boxes, case studies, blog filters, forms) [OV/CT]
========================================================================= */
.green-num-box {
background: rgba(2, 208, 90, 0.1) !important;
backdrop-filter: blur(150px);
width: 90px !important;
height: 93px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: none !important;
}
.green-num-box::before {
content: "";
position: absolute;
inset: 0;
padding: 1.5px;
border-radius: inherit;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: linear-gradient(141.82deg, #99FC2E 5.85%, #02D05A 99.46%) !important;
z-index: -1 !important;
box-sizing: border-box !important;
}
.green-num-box h3 { font-size: 40px !important; }
/* Green bar animation.
FLAG (report §d): grn-bar-lft.png is on the old webappdesigns.com dev host. */
.website { position: relative; padding: 70px 0; }
.cloude-move {
position: absolute;
top: 0;
background: url('img/grn-bar-lft.png') no-repeat center center;
background-size: 100% 100%;
height: 100%;
width: 120px;
left: 0;
animation: moving 20s infinite alternate;
}
@keyframes moving {
0% { left: -3%; top: 0px; }
100% { left: 92%; top: 0px; }
}
.circle { position: relative; }
.circle-rotate {
position: absolute;
z-index: 99;
animation: spin 2s linear infinite;
}
.main-circle { z-index: 9; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Blog / case studies filters.
FLAG (report §d): arrow-btn.png / search-icon.png on old webappdesigns.com host. */
div#filter-results, .related-posts-grid { display: flex; flex-wrap: wrap; }
.post-card { width: 50%; padding: 15px; position: relative; }
div#filter-results .add-text { font-size: 1rem; }
div#filter-results a.more-btn, .related-posts-grid a.more-btn {
color: #E8E6E1;
display: inline-block;
padding-right: 20px;
background: url('img/arrow-btn.png') no-repeat center right;
background-size: 12px;
}
div#filter-results a.more-btn:hover, .related-posts-grid a.more-btn:hover {
color: rgba(255, 59, 29, 1);
}
.filter-buttons button {
border: 1px solid rgba(255, 59, 29, 0.4);
background: rgba(49, 49, 49, 0.49);
color: rgba(218, 24, 27, 1);
font-size: 1.2rem;
font-weight: 400;
padding: 10px 40px;
text-align: center;
border-radius: 10px;
}
.filter-buttons button:hover, .filter-buttons button.active {
background: var(--e-global-color-secondary);
background-color: transparent;
color: #E8E6E1;
background-image: linear-gradient(180deg, var(--e-global-color-secondary) 0%, var(--e-global-color-fc0c325) 100%);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: var(--e-global-color-fc0c325);
}
.filter-bar {
display: flex;
margin-bottom: 30px;
gap: 30px;
justify-content: space-between;
padding: 0 15px;
}
.filter-buttons { display: flex; gap: 15px; }
.filter-search #post-search {
border: 1px solid rgba(255, 59, 29, 0.4);
color: rgba(218, 24, 27, 1);
width: 250px;
max-width: 100%;
background: rgba(49, 49, 49, 0.49) url('img/search-icon.png') no-repeat calc(100% - 15px) 13px;
background-size: 20px;
font-size: 1.2rem;
font-weight: 400;
padding: 10px 60px 10px 20px;
text-align: left;
border-radius: 25px;
}
/* Case studies page */
.post-card h3 { font-size: 42px !important; }
.post-card .add-text { font-size: 22px !important; }
.post-card .post-excerpt { font-size: 17px !important; }
.post-card::after,
.post-card::before {
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
transition: all 0.5s;
border-radius: 15px;
z-index: -1;
}
.post-card::after {
border-right: 2px solid #99fc2e;
border-left: 2px solid #99fc2e;
transform: scale(1, 0);
}
.post-card::before {
border-top: 2px solid #99fc2e;
border-bottom: 2px solid #99fc2e;
transform: scale(0, 1);
}
.post-card:hover::after,
.post-card:hover::before {
transform: scale(1, 1);
}
.post-img {
border-radius: 15px;
overflow: hidden;
height: 398px;
margin-bottom: 20px;
}
.post-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.4s ease;
}
.post-card:hover .post-img img { transform: scale(1.1); }
.red-circle,
.green-circle {
transform-box: fill-box;
transform-origin: center;
transition: transform 250ms ease-out, filter 100ms ease-out;
z-index: 9;
}
.red-circle:hover { filter: drop-shadow(0 0 10px rgba(255, 59, 29, 0.8)); }
.green-circle:hover { filter: drop-shadow(0 0 10px rgba(2, 208, 90, 0.8)); }
.red-circle:hover,
.green-circle:hover { transform: scale(1.12); }
/* Post detail page.
url() RELATIVISED: theme img SVGs red_circle/green_circle → assets/img/
(were absolute theme paths on webappdesigns.com — report §d). */
.add-text { font-size: 1.4rem; }
.case-studies-content,
.post-excerpt {
font-family: "Helvetica", Sans-serif !important;
}
.site-main:has(.case-studies-banner) {
max-width: 90% !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.case-studies-banner h1 {
line-height: 1em;
margin-bottom: 0px;
}
.settlement-text,
.case-studies-content h2 { font-size: 2.2rem; }
.case-studies-content h3 {
margin: 35px 0 20px;
font-size: 1.9rem;
}
.related-posts-section,
.case-studies-banner,
.certified-section { position: relative; }
.related-posts-section::before,
.case-studies-banner:before,
.certified-section:before,
.certified-section:after {
content: '';
position: absolute;
background-size: contain;
background-repeat: no-repeat;
width: 1000px;
height: 650px;
z-index: -1;
background-image: url(img/red_circle_svg.svg);
}
.related-posts-section::before { left: 0; top: -25%; }
.case-studies-banner:before,
.certified-section:before { right: -650px; bottom: -45%; }
.certified-section:after {
background-image: url(img/green_circle_svg.svg);
left: -400px;
bottom: 20%;
}
.related-posts-wrapper { z-index: 9; position: relative; }
.related-title {
text-align: center;
margin: 100px 0 30px;
line-height: 1em;
}
.certified-content {
text-align: center;
margin-top: 100px;
padding: 100px 15px;
background: linear-gradient(144.16deg, rgba(28, 28, 28, 0.1) 6.82%, rgba(2, 208, 90, 0.45) 85.86%);
border: 2px solid rgba(153, 252, 46, 0.5);
backdrop-filter: blur(150px);
border-radius: 40px;
overflow: hidden;
}
.certified-content p {
margin: 22px 0 35px;
font-family: "Helvetica", Sans-serif !important;
}
.certified-content h2 { margin: 0px; }
.post-featured-image {
overflow: hidden;
border-radius: 40px;
margin-top: 65px;
display: flex;
}
.settlement-text { margin-top: 65px; }
.post-featured-image img { transition: all 0.3s ease-out !important; }
.post-featured-image:hover img { transform: scale(1.1); }
/* Credentials box */
.cradentials-box-wrap > .elementor-element {
background: linear-gradient(128.98deg, rgba(28, 28, 28, 0.1) 1.54%, rgba(2, 208, 90, 0.45) 104.46%) !important;
}
/* Contact form + plan boxes */
.contact-form { display: flex; flex-wrap: wrap; gap: 20px; }
.form-row-6 { flex-basis: calc((100% - 20px)/2); }
.form-row-12 { flex-basis: 100%; }
.contact-form input:not(input[type="submit"]) {
background: linear-gradient(127.67deg, rgba(255, 255, 255, 0.06) 1.71%, rgba(2, 208, 90, 0.2) 98.19%);
border: 2px solid rgba(153, 252, 46, 0.2);
outline: none;
padding: 15px 20px;
border-radius: 10px;
color: #E8E6E1;
}
.contact-form input::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
font-family: "Inter Tight", Sans-serif !important;
}
.contact-form label { margin-bottom: 10px; font-size: 18px; }
.form-gradient-section > div {
background: linear-gradient(144.16deg, rgba(28, 28, 28, 0.1) 6.82%, rgba(2, 208, 90, 0.45) 85.86%);
padding: 30px !important;
align-items: center !important;
border: 2px solid rgba(153, 252, 46, 0.5);
border-radius: 40px;
}
.form-text p {
font-family: "Helvetica" !important;
margin-bottom: 10px !important;
font-size: 18px;
}
.icon-text-box .elementor-icon-list-items { gap: 25px; }
.icon-text-box .elementor-icon-list-item,
.plan-name {
background: rgba(2, 208, 90, 0.1);
border: 1px solid #99fc2e4d;
padding: 12px 30px !important;
border-radius: 12px;
font-size: 18px !important;
}
.plan-name {
padding: 8px 24px !important;
border-radius: 8px;
font-size: 16px !important;
display: inline-block;
}
.year-text {
font-family: "Helvetica" !important;
color: rgba(255, 255, 255, 0.6);
font-size: 28px;
font-weight: 400 !important;
}
.plan-list-content .elementor-icon-list-icon { padding-top: 5px; }
.plan-list-content .elementor-icon-list-item { margin-bottom: 12px !important; }
.plan-list-content .elementor-icon-list-item:last-child { margin-bottom: 0px !important; }
.form-text-wrap .elementor-heading-title {
display: flex;
align-items: center;
gap: 10px;
}
.form-text {
font-family: "Inter Tight", Sans-serif !important;
font-size: 16px !important;
}
.plan-box-wrap {
height: 100% !important;
transition: all 0.3s ease-out !important;
}
.plan-box-wrap:hover { border-color: #99fc2e !important; }
/* =========================================================================
7. GHOST ANIMATION (red pulsing glow) [OV/CT]
========================================================================= */
/* TODO: element-id -> stable wsr-* class */
.elementor-element-800741f { position: relative; }
.elementor-element-800741f .elementor-widget-container {
transition: transform 0.4s ease;
display: inline-block;
}
.elementor-element-800741f:hover .elementor-widget-container {
transform: scale(1.15);
}
.elementor-element-800741f img {
filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8))
drop-shadow(0 0 50px rgba(255, 0, 0, 0.5))
drop-shadow(0 0 80px rgba(255, 0, 0, 0.3));
animation: ghost-pulse 2.5s ease-in-out infinite;
cursor: pointer;
position: relative;
z-index: 2;
}
@keyframes ghost-pulse {
0%, 100% {
filter: drop-shadow(0 0 20px rgba(255,0,0,0.8))
drop-shadow(0 0 50px rgba(255,0,0,0.5))
drop-shadow(0 0 80px rgba(255,0,0,0.3));
}
50% {
filter: drop-shadow(0 0 30px rgba(255,0,0,1))
drop-shadow(0 0 65px rgba(255,0,0,0.7))
drop-shadow(0 0 100px rgba(255,0,0,0.4));
}
}
/* =========================================================================
8. BADGES & CERTIFICATES [OV/CT]
========================================================================= */
/* Homepage badges */
/* TODO: element-id -> stable wsr-* class */
.elementor-element-2e0cd21 .elementor-widget-image img {
max-height: 180px;
width: auto;
height: auto;
transition: transform 0.4s ease, filter 0.4s ease;
cursor: pointer;
}
.elementor-element-2e0cd21 .elementor-widget-image:hover img {
transform: scale(1.15);
filter: drop-shadow(0 0 15px rgba(2, 208, 90, 0.8))
drop-shadow(0 0 40px rgba(2, 208, 90, 0.5))
drop-shadow(0 0 70px rgba(2, 208, 90, 0.3));
}
/* Footer badges */
ul.footer-logos img {
max-height: 100px;
width: auto;
height: auto;
transition: transform 0.4s ease, filter 0.4s ease;
cursor: pointer;
}
ul.footer-logos li:hover img {
transform: scale(1.15);
filter: drop-shadow(0 0 15px rgba(2, 208, 90, 0.8))
drop-shadow(0 0 40px rgba(2, 208, 90, 0.5))
drop-shadow(0 0 70px rgba(2, 208, 90, 0.3));
}
/* Attack Database badge (Sitting Duck section) */
/* TODO: element-id -> stable wsr-* class */
.elementor-element-a1cab36 img {
transition: transform 0.4s ease, filter 0.4s ease;
cursor: pointer;
}
.elementor-element-a1cab36:hover img {
transform: scale(1.15);
filter: drop-shadow(0 0 15px rgba(2, 208, 90, 0.8))
drop-shadow(0 0 40px rgba(2, 208, 90, 0.5))
drop-shadow(0 0 70px rgba(2, 208, 90, 0.3));
}
/* Certificate comparison boxes */
/* TODO: element-id -> stable wsr-* class */
.elementor-element-6885ae5,
.elementor-element-08ebf24 {
border: 3px solid rgba(2, 208, 90, 0.6) !important;
border-radius: 12px;
padding: 20px !important;
}
.elementor-element-6885ae5 img,
.elementor-element-08ebf24 img {
width: 100% !important;
height: 100% !important; min-height: 540px;
object-fit: cover;
border-radius: 8px;
}
/* =========================================================================
9. FOOTER [OV/CT + ST Footer V2]
========================================================================= */
.site-footer::before {
content: '';
width: 100%;
height: 100%;
background: radial-gradient(67.75% 90.94% at 50% 9.06%, #5CAA08 0%, #116D38 50.97%, rgba(27, 27, 27, 0) 100%);
transform: rotate(180deg);
position: absolute;
bottom: -120px;
left: 0px;
}
.site-footer > div {
z-index: 9;
position: relative;
}
.footer-logo { margin-bottom: 20px; }
ul.footer-logos { display: flex; gap: 10px; }
ul.footer-socials {
display: flex;
gap: 14px;
list-style: none;
padding: 0;
margin: 0;
}
ul.footer-socials li {
display: flex;
align-items: center;
justify-content: center;
}
ul.footer-socials li a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: rgba(10, 60, 20, 0.85);
border: 2px solid #99fc2e;
border-radius: 50%;
transition: all 0.35s ease;
}
ul.footer-socials li a svg {
width: 22px;
height: 22px;
fill: #ffffff;
transition: fill 0.35s ease;
}
ul.footer-socials li a:hover {
background: #99fc2e;
border-color: #99fc2e;
transform: rotate(360deg) scale(1.25);
box-shadow: 0 0 18px rgba(153, 252, 46, 0.6), 0 0 40px rgba(153, 252, 46, 0.25);
}
ul.footer-socials li a:hover svg {
fill: #0a1e0a;
}
ul.footer-socials li:nth-child(1) a:hover,
ul.footer-socials li:nth-child(2) a:hover { background: #0A66C2; border-color: #0A66C2; box-shadow: 0 0 18px rgba(10,102,194,0.6); }
ul.footer-socials li:nth-child(1) a:hover svg,
ul.footer-socials li:nth-child(2) a:hover svg { fill: #fff; }
ul.footer-socials li:nth-child(3) a:hover { background: #1877F2; border-color: #1877F2; box-shadow: 0 0 18px rgba(24,119,242,0.6); }
ul.footer-socials li:nth-child(3) a:hover svg { fill: #fff; }
ul.footer-socials li:nth-child(4) a:hover { background: #E4405F; border-color: #E4405F; box-shadow: 0 0 18px rgba(228,64,95,0.6); }
ul.footer-socials li:nth-child(4) a:hover svg { fill: #fff; }
ul.footer-socials li:nth-child(5) a:hover { background: #FF0000; border-color: #FF0000; box-shadow: 0 0 18px rgba(255,0,0,0.6); }
ul.footer-socials li:nth-child(5) a:hover svg { fill: #fff; }
li#custom_html-5 { margin-top: 40px; }
.footer-copyright {
display: flex;
justify-content: space-between;
width: 100%;
margin: 40px 0 0;
border-top: 2px solid rgba(153, 252, 46, 0.22);
padding: 20px 0 10px;
}
ul#menu-footer-privacy-links { display: flex; gap: 20px; }
ul#menu-footer-quick-links {
display: flex;
flex-direction: column;
gap: 10px;
font-family: "Inter Tight", Sans-serif;
}
/* Footer widget titles — "beat all overrides" (1.6rem/600 !important).
CONFLICT: supersedes the §0 `.site-footer h2` (1rem/400) and the ST Footer V2
`.site-footer h2` (1rem/600) — both dead here on specificity (report §c).
Footer V2 padding-top (4rem, §0) + max-991 3rem (§12) retained. */
footer#site-footer h2,
footer#site-footer .widgettitle,
.site-footer h2.widgettitle,
.site-footer h2 {
font-size: 1.6rem !important;
font-weight: 600 !important;
font-family: "Inter Tight", Sans-serif !important;
margin-bottom: 15px !important;
color: #E8E6E1 !important;
-webkit-text-fill-color: #fff !important;
background: none !important;
background-clip: unset !important;
}
/* =========================================================================
10. INNER-PAGE GLOWS [OV] (v18 pattern — CSS pseudo-elements)
LIVE: these page-id + element-ID rules are the actual rendering glows.
[CT] replaced them with dormant utility classes (see §18) that are DEFINED
but NOT ASSIGNED to any page — so these remain the source of truth.
EVERY selector here is element-ID debt — TODO: element-id -> stable wsr-* class.
========================================================================= */
/* Global: overflow visible for glow bleed on inner pages */
body:not(.home) .e-con,
body:not(.home) .e-con-inner {
overflow: visible !important;
}
body:not(.home) .e-con > .e-con-inner {
position: relative !important;
z-index: 2 !important;
}
/* ---- GREEN GLOW PAGES: About, Pricing, Certificate, E-Book ---- */
/* About hero — green left */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2558 .elementor-element-c6ab0b8 { position: relative !important; }
body.page-id-2558 .elementor-element-c6ab0b8::after {
content: ""; position: absolute; left: -200px; top: 30%;
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* About "Credentials" — green right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2558 .elementor-element-95c6e0e { position: relative !important; }
body.page-id-2558 .elementor-element-95c6e0e::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* About "The Mission" — green left */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2558 .elementor-element-6a60904 { position: relative !important; }
body.page-id-2558 .elementor-element-6a60904::before {
content: ""; position: absolute; left: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* About CTA "Ready to Stop" — green right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2558 .elementor-element-5b43bde { position: relative !important; }
body.page-id-2558 .elementor-element-5b43bde::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.35);
box-shadow: 0 0 500px 400px rgba(15, 150, 30, 0.22), 0 0 250px 180px rgba(20, 200, 40, 0.16);
}
/* Pricing hero — green left */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2910 .elementor-element-47b5a57 { position: relative !important; }
body.page-id-2910 .elementor-element-47b5a57::after {
content: ""; position: absolute; left: -200px; top: 30%;
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* Pricing tiers — green right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2910 .elementor-element-38c3192 { position: relative !important; }
body.page-id-2910 .elementor-element-38c3192::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.35);
box-shadow: 0 0 500px 400px rgba(15, 150, 30, 0.22), 0 0 250px 180px rgba(20, 200, 40, 0.16);
}
/* Certificate hero — green left */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1389 .elementor-element-47b5a57 { position: relative !important; }
body.page-id-1389 .elementor-element-47b5a57::after {
content: ""; position: absolute; left: -200px; top: 30%;
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* Certificate "What Your Certificate Proves" + "Badge System" — matched layout (also in [CT]) */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1389 .elementor-element-17ff552,
body.page-id-1389 .elementor-element-cbad588 { padding: 90px 0 !important; }
/* TODO: element-id -> stable wsr-* class */
body.page-id-1389 .elementor-element-678054f { grid-template-columns: 1fr 1fr !important; }
/* Certificate "Badge System" — green right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1389 .elementor-element-cbad588 { position: relative !important; }
body.page-id-1389 .elementor-element-cbad588::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.35);
box-shadow: 0 0 500px 400px rgba(15, 150, 30, 0.22), 0 0 250px 180px rgba(20, 200, 40, 0.16);
}
/* Certificate "Without Certification: Impossible Position" — red left */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1389 .elementor-element-2b8cf9a { position: relative !important; }
body.page-id-1389 .elementor-element-2b8cf9a::before {
content: ""; position: absolute; left: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
}
/* Certificate "WARNING: Knowledge Trap" — red right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1389 .elementor-element-8617536 { position: relative !important; }
body.page-id-1389 .elementor-element-8617536::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
}
/* Certificate "If You Misrepresent" — red left */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1389 .elementor-element-ec409fb { position: relative !important; }
body.page-id-1389 .elementor-element-ec409fb::before {
content: ""; position: absolute; left: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
}
/* Certificate CTA "Get Your Certificate" — green right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1389 .elementor-element-de83d17 { position: relative !important; }
body.page-id-1389 .elementor-element-de83d17::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.35);
box-shadow: 0 0 500px 400px rgba(15, 150, 30, 0.22), 0 0 250px 180px rgba(20, 200, 40, 0.16);
}
/* E-Book: shift LEFT text columns (also in [CT]) */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2832 .elementor-element-86c4c45,
body.page-id-2832 .elementor-element-bb3b028 { padding-left: 150px !important; }
/* E-Book: force RED on "14-Page Guide" / "Case Study" highlights */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2832 .elementor-element-3a85876 .grn-text,
body.page-id-2832 .elementor-element-240af04 .grn-text {
color: rgba(255, 59, 29, 1) !important;
-webkit-text-fill-color: rgba(255, 59, 29, 1) !important;
}
/* E-Book: red glow behind images in RED-title sections */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2832 .elementor-element-319ee74,
body.page-id-2832 .elementor-element-2bcbfae { position: relative !important; }
body.page-id-2832 .elementor-element-319ee74::before,
body.page-id-2832 .elementor-element-2bcbfae::before {
content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 0;
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.22), 0 0 250px 180px rgba(220, 40, 30, 0.16);
}
/* E-Book: green glow behind images in GREEN-title sections */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2832 .elementor-element-82f4112,
body.page-id-2832 .elementor-element-a32a2ed { position: relative !important; }
body.page-id-2832 .elementor-element-82f4112::before,
body.page-id-2832 .elementor-element-a32a2ed::before {
content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 0;
background: rgba(20, 200, 40, 0.40);
box-shadow: 0 0 500px 400px rgba(15, 150, 30, 0.22), 0 0 250px 180px rgba(20, 200, 40, 0.16);
}
/* E-Book hero — red glow */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2832 .elementor-element-47b5a57 { position: relative !important; }
body.page-id-2832 .elementor-element-47b5a57::after {
content: ""; position: absolute; right: -200px; top: 30%;
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
/* E-Book download form — red right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-2832 .elementor-element-df37641 { position: relative !important; }
body.page-id-2832 .elementor-element-df37641::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
}
/* ---- RED GLOW PAGES: Threats, Proof/Case Studies ---- */
/* Threats: force sans-serif on bottom sections (also in [CT]) */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1234 .elementor-element-e7bf9a9,
body.page-id-1234 .elementor-element-e7bf9a9 *,
body.page-id-1234 .elementor-element-de83d17,
body.page-id-1234 .elementor-element-de83d17 * {
font-family: "Inter Tight", Sans-serif !important;
}
/* Threats hero — red right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1234 .elementor-element-47b5a57 { position: relative !important; }
body.page-id-1234 .elementor-element-47b5a57::after {
content: ""; position: absolute; right: -200px; top: 30%;
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
/* Threats "Tutorials on YouTube" — red left */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1234 .elementor-element-4fd8538 { position: relative !important; }
body.page-id-1234 .elementor-element-4fd8538::before {
content: ""; position: absolute; left: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
/* Threats "StilachiRAT" — red right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1234 .elementor-element-3c23bb4 { position: relative !important; }
body.page-id-1234 .elementor-element-3c23bb4::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
}
/* Threats "Protection Doesn't Work" — red left */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1234 .elementor-element-6c351a5 { position: relative !important; }
body.page-id-1234 .elementor-element-6c351a5::before {
content: ""; position: absolute; left: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
}
/* Threats "Workforce Coming" — red right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-1234 .elementor-element-e7bf9a9 { position: relative !important; }
body.page-id-1234 .elementor-element-e7bf9a9::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
/* Proof hero — red right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-760 .elementor-element-47b5a57 { position: relative !important; }
body.page-id-760 .elementor-element-47b5a57::after {
content: ""; position: absolute; right: -200px; top: 30%;
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
/* Proof case studies — red left */
/* TODO: element-id -> stable wsr-* class */
body.page-id-760 .elementor-element-34e25cb { position: relative !important; }
body.page-id-760 .elementor-element-34e25cb::before {
content: ""; position: absolute; left: -200px; top: 30%;
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
}
/* Proof "Not Identity Theft" — red right */
/* TODO: element-id -> stable wsr-* class */
body.page-id-760 .elementor-element-9af057c { position: relative !important; }
body.page-id-760 .elementor-element-9af057c::after {
content: ""; position: absolute; right: -200px; top: 50%; transform: translateY(-50%);
width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
}
/* =========================================================================
11. OVERWATCH (page-id-3973) [OV]
Pipeline cards, glow map, 9-card grid, dispatches. All element-ID debt.
NOTE: [CT] stripped ALL page-3973 selectors (2026-04-22) intending Elementor
Page Settings to own them; the LIVE mu-plugin still ships this block, so it is
retained as current behaviour. (Also supersedes the excluded wsr-id-targeted.css
5-card cell styling — report §c.) TODO: element-id -> stable wsr-* class (all).
========================================================================= */
/* --- "Everything That Keeps You Safe" 9-card grid (0326b676) --- */
/* TODO: element-id -> stable wsr-* class */
body.page-id-3973 .elementor-element-0326b676 > .e-con-inner {
background:
radial-gradient(ellipse 900px 400px at 50% 50%, rgba(2, 208, 90, 0.08), transparent 70%),
linear-gradient(180deg, rgba(18, 24, 18, 0.6) 0%, rgba(12, 16, 12, 0.6) 100%) !important;
border: 1px solid rgba(153, 252, 46, 0.15) !important;
border-radius: 18px !important;
padding: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 48px) !important;
position: relative !important;
z-index: 2 !important;
box-shadow:
0 0 0 1px rgba(153, 252, 46, 0.05),
0 0 80px rgba(2, 208, 90, 0.15),
0 0 200px rgba(153, 252, 46, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
body.page-id-3973 .elementor-element-0326b676 .e-con.e-child:hover {
background: rgba(255, 255, 255, 0.02) !important;
border-color: rgba(153, 252, 46, 0.4) !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 30px rgba(153, 252, 46, 0.15) !important;
transition: all 0.4s ease !important;
}
/* --- "Dispatches From The War" cards (45e51411) --- */
/* TODO: element-id -> stable wsr-* class */
body.page-id-3973 .elementor-element-45e51411 .e-con.e-child {
position: relative !important;
overflow: visible !important;
border-top: none !important;
transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}
body.page-id-3973 .elementor-element-45e51411 .e-con.e-child::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg,
rgba(153, 252, 46, 0.3) 0%,
rgba(153, 252, 46, 1) 30%,
rgba(255, 255, 255, 1) 50%,
rgba(153, 252, 46, 1) 70%,
rgba(153, 252, 46, 0.3) 100%) !important;
box-shadow:
0 0 14px rgba(153, 252, 46, 1),
0 0 28px rgba(153, 252, 46, 0.7),
0 0 56px rgba(153, 252, 46, 0.35) !important;
z-index: 3 !important;
border-radius: 2px !important;
animation: wsr-dispatches-pulse 3s ease-in-out infinite !important;
}
@keyframes wsr-dispatches-pulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; filter: brightness(1.3); }
}
body.page-id-3973 .elementor-element-45e51411 .e-con.e-child::after {
content: '' !important;
position: absolute !important;
bottom: -40px !important; left: 10% !important; right: 10% !important;
height: 80px !important;
background: radial-gradient(ellipse at center,
rgba(153, 252, 46, 0.35) 0%,
rgba(2, 208, 90, 0.15) 40%,
transparent 70%) !important;
filter: blur(30px) !important;
z-index: 0 !important;
pointer-events: none !important;
transition: all 0.5s ease !important;
}
body.page-id-3973 .elementor-element-45e51411 .e-con.e-child:hover {
transform: translateY(-6px) !important;
box-shadow:
0 0 0 1px rgba(153, 252, 46, 0.4),
0 20px 50px rgba(0, 0, 0, 0.4),
0 0 60px rgba(153, 252, 46, 0.2) !important;
}
body.page-id-3973 .elementor-element-45e51411 .e-con.e-child:hover::before {
animation-duration: 1.5s !important;
box-shadow:
0 0 20px rgba(153, 252, 46, 1),
0 0 40px rgba(153, 252, 46, 0.9),
0 0 80px rgba(153, 252, 46, 0.5) !important;
}
body.page-id-3973 .elementor-element-45e51411 .e-con.e-child:hover::after {
bottom: -50px !important;
filter: blur(24px) !important;
background: radial-gradient(ellipse at center,
rgba(153, 252, 46, 0.55) 0%,
rgba(2, 208, 90, 0.25) 40%,
transparent 70%) !important;
}
/* --- 5-Card Stack Pipeline (section 6fcba862, row e3e97f46) --- */
/* TODO: element-id -> stable wsr-* class */
body.page-id-3973 .elementor-element-6fcba862 { perspective: 1400px !important; }
/* TODO: element-id -> stable wsr-* class */
body.page-id-3973 .elementor-element-e3e97f46 { position: relative !important; }
body.page-id-3973 .elementor-element-e3e97f46::before {
content: ''; position: absolute; top: 50%; left: 4%; right: 4%; height: 2px;
transform: translateY(-50%);
background: linear-gradient(90deg,
transparent 0%,
rgba(153, 252, 46, 0.15) 10%,
rgba(153, 252, 46, 0.35) 50%,
rgba(153, 252, 46, 0.15) 90%,
transparent 100%);
z-index: 0; pointer-events: none;
}
body.page-id-3973 .elementor-element-e3e97f46::after {
content: ''; position: absolute; top: 50%; left: 4%; width: 40px; height: 4px;
transform: translateY(-50%);
background: linear-gradient(90deg, transparent, rgba(153, 252, 46, 0.9), rgba(255, 255, 255, 1), rgba(153, 252, 46, 0.9), transparent);
border-radius: 2px; filter: blur(1px);
box-shadow: 0 0 12px rgba(153, 252, 46, 0.8), 0 0 24px rgba(153, 252, 46, 0.5);
z-index: 1; pointer-events: none;
animation: wsr-pipeline-flow 4.5s linear infinite;
}
@keyframes wsr-pipeline-flow {
0% { left: 4%; opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { left: calc(96% - 40px); opacity: 0; }
}
/* The 5 cards */
/* TODO: element-id -> stable wsr-* class */
body.page-id-3973 .elementor-element-76e9e804,
body.page-id-3973 .elementor-element-373cb2e6,
body.page-id-3973 .elementor-element-751af2b3,
body.page-id-3973 .elementor-element-9354dc27,
body.page-id-3973 .elementor-element-10598541 {
position: relative !important;
overflow: visible !important;
border: 1px solid rgba(153, 252, 46, 0.25) !important;
border-radius: 14px !important;
background: linear-gradient(180deg, rgba(28, 28, 28, 0.92) 0%, rgba(12, 16, 12, 0.92) 100%) !important;
padding: 32px 24px 28px !important;
transform-style: preserve-3d !important;
transition:
transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.4s ease,
box-shadow 0.5s ease,
background 0.4s ease !important;
box-shadow:
0 0 0 1px rgba(153, 252, 46, 0.08),
0 8px 24px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
z-index: 2;
}
body.page-id-3973 .elementor-element-76e9e804::before,
body.page-id-3973 .elementor-element-373cb2e6::before,
body.page-id-3973 .elementor-element-751af2b3::before,
body.page-id-3973 .elementor-element-9354dc27::before,
body.page-id-3973 .elementor-element-10598541::before {
content: ''; position: absolute; inset: -1px; border-radius: 14px; padding: 1px;
background: conic-gradient(from 0deg,
rgba(153, 252, 46, 0) 0%,
rgba(153, 252, 46, 0.8) 15%,
rgba(2, 208, 90, 0.9) 25%,
rgba(153, 252, 46, 0) 40%,
rgba(153, 252, 46, 0) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: wsr-trace-rotate 4s linear infinite;
opacity: 0.55; pointer-events: none; z-index: 1;
}
@keyframes wsr-trace-rotate {
to { transform: rotate(1turn); }
}
body.page-id-3973 .elementor-element-373cb2e6::before { animation-delay: -0.8s; }
body.page-id-3973 .elementor-element-751af2b3::before { animation-delay: -1.6s; }
body.page-id-3973 .elementor-element-9354dc27::before { animation-delay: -2.4s; }
body.page-id-3973 .elementor-element-10598541::before { animation-delay: -3.2s; }
body.page-id-3973 .elementor-element-76e9e804::after,
body.page-id-3973 .elementor-element-373cb2e6::after,
body.page-id-3973 .elementor-element-751af2b3::after,
body.page-id-3973 .elementor-element-9354dc27::after,
body.page-id-3973 .elementor-element-10598541::after {
content: ''; position: absolute; top: 14px; right: 14px; width: 8px; height: 8px;
border-radius: 50%;
background: rgba(153, 252, 46, 1);
box-shadow: 0 0 8px rgba(153, 252, 46, 1), 0 0 16px rgba(153, 252, 46, 0.6);
animation: wsr-diode-pulse 1.8s ease-in-out infinite;
z-index: 3;
}
@keyframes wsr-diode-pulse {
0%, 100% { opacity: 0.4; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
body.page-id-3973 .elementor-element-373cb2e6::after { animation-delay: 0.3s; }
body.page-id-3973 .elementor-element-751af2b3::after { animation-delay: 0.6s; }
body.page-id-3973 .elementor-element-9354dc27::after { animation-delay: 0.9s; }
body.page-id-3973 .elementor-element-10598541::after { animation-delay: 1.2s; }
body.page-id-3973 .elementor-element-76e9e804:hover,
body.page-id-3973 .elementor-element-373cb2e6:hover,
body.page-id-3973 .elementor-element-751af2b3:hover,
body.page-id-3973 .elementor-element-9354dc27:hover,
body.page-id-3973 .elementor-element-10598541:hover {
transform: translateY(-12px) scale(1.04) rotateX(2deg) !important;
border-color: rgba(153, 252, 46, 0.8) !important;
background: linear-gradient(180deg, rgba(35, 45, 28, 0.95) 0%, rgba(18, 26, 15, 0.95) 100%) !important;
box-shadow:
0 0 0 1px rgba(153, 252, 46, 0.6),
0 0 40px rgba(153, 252, 46, 0.4),
0 0 80px rgba(153, 252, 46, 0.2),
0 24px 60px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
z-index: 5 !important;
}
body.page-id-3973 .elementor-element-76e9e804:hover::before,
body.page-id-3973 .elementor-element-373cb2e6:hover::before,
body.page-id-3973 .elementor-element-751af2b3:hover::before,
body.page-id-3973 .elementor-element-9354dc27:hover::before,
body.page-id-3973 .elementor-element-10598541:hover::before {
opacity: 1 !important;
animation-duration: 1.5s !important;
}
body.page-id-3973 .elementor-element-76e9e804 h3,
body.page-id-3973 .elementor-element-373cb2e6 h3,
body.page-id-3973 .elementor-element-751af2b3 h3,
body.page-id-3973 .elementor-element-9354dc27 h3,
body.page-id-3973 .elementor-element-10598541 h3,
body.page-id-3973 .elementor-element-76e9e804 h3.elementor-heading-title,
body.page-id-3973 .elementor-element-373cb2e6 h3.elementor-heading-title,
body.page-id-3973 .elementor-element-751af2b3 h3.elementor-heading-title,
body.page-id-3973 .elementor-element-9354dc27 h3.elementor-heading-title,
body.page-id-3973 .elementor-element-10598541 h3.elementor-heading-title {
color: #99FC2E !important;
font-family: 'alfabet-light', 'Alfabet', sans-serif !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
text-shadow: 0 0 10px rgba(153, 252, 46, 0.3);
transition: text-shadow 0.4s ease !important;
}
body.page-id-3973 .elementor-element-76e9e804:hover h3,
body.page-id-3973 .elementor-element-373cb2e6:hover h3,
body.page-id-3973 .elementor-element-751af2b3:hover h3,
body.page-id-3973 .elementor-element-9354dc27:hover h3,
body.page-id-3973 .elementor-element-10598541:hover h3 {
text-shadow:
0 0 12px rgba(153, 252, 46, 0.9),
0 0 24px rgba(153, 252, 46, 0.5),
0 0 48px rgba(153, 252, 46, 0.3) !important;
}
@media (max-width: 991px) {
body.page-id-3973 .elementor-element-e3e97f46::before,
body.page-id-3973 .elementor-element-e3e97f46::after { display: none; }
body.page-id-3973 .elementor-element-76e9e804:hover,
body.page-id-3973 .elementor-element-373cb2e6:hover,
body.page-id-3973 .elementor-element-751af2b3:hover,
body.page-id-3973 .elementor-element-9354dc27:hover,
body.page-id-3973 .elementor-element-10598541:hover {
transform: translateY(-8px) scale(1.02) !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-id-3973 .elementor-element-e3e97f46::after,
body.page-id-3973 .elementor-element-76e9e804::before,
body.page-id-3973 .elementor-element-373cb2e6::before,
body.page-id-3973 .elementor-element-751af2b3::before,
body.page-id-3973 .elementor-element-9354dc27::before,
body.page-id-3973 .elementor-element-10598541::before,
body.page-id-3973 .elementor-element-76e9e804::after,
body.page-id-3973 .elementor-element-373cb2e6::after,
body.page-id-3973 .elementor-element-751af2b3::after,
body.page-id-3973 .elementor-element-9354dc27::after,
body.page-id-3973 .elementor-element-10598541::after {
animation: none !important;
}
}
/* --- Overwatch glow map (per-section scroll-driven glows) --- */
/* TODO: element-id -> stable wsr-* class (all selectors in this sub-block) */
body.page-id-3973 .e-con,
body.page-id-3973 .e-con-inner { overflow: visible !important; }
body.page-id-3973 .e-con > .e-con-inner { position: relative !important; z-index: 2 !important; }
body.page-id-3973 > .elementor > .elementor-element,
body.page-id-3973 [data-elementor-type] > .elementor-element,
body.page-id-3973 .elementor-element-a8530d5e,
body.page-id-3973 .elementor-element-bf14624c,
body.page-id-3973 .elementor-element-6fcba862,
body.page-id-3973 .elementor-element-6f422186,
body.page-id-3973 .elementor-element-2a910e42,
body.page-id-3973 .elementor-element-83f8a777,
body.page-id-3973 .elementor-element-02517e5e,
body.page-id-3973 .elementor-element-7150c235,
body.page-id-3973 .elementor-element-d4218637,
body.page-id-3973 .elementor-element-fbe98c2b,
body.page-id-3973 .elementor-element-0326b676,
body.page-id-3973 .elementor-element-45e51411,
body.page-id-3973 .elementor-element-4f817c72,
body.page-id-3973 .elementor-element-3a8e0f68 {
position: relative !important;
overflow: visible !important;
}
body.page-id-3973 .wsr-glow-green-left::before,
body.page-id-3973 .wsr-glow-green-right::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; top: 50%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
body.page-id-3973 .wsr-glow-green-left::before { left: -200px; }
body.page-id-3973 .wsr-glow-green-right::after { right: -200px; }
body.page-id-3973 .wsr-glow-red-left::before,
body.page-id-3973 .wsr-glow-red-right::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; top: 50%; transform: translateY(-50%);
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
body.page-id-3973 .wsr-glow-red-left::before { left: -200px; }
body.page-id-3973 .wsr-glow-red-right::after { right: -200px; }
/* 0. Hero — green right */
body.page-id-3973 .elementor-element-a8530d5e::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; right: -200px; top: 50%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* 2. If You Know AI — green both sides */
body.page-id-3973 .elementor-element-6fcba862::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; left: -200px; top: 40%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.42);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.28), 0 0 300px 200px rgba(20, 200, 40, 0.20);
}
body.page-id-3973 .elementor-element-6fcba862::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; right: -200px; top: 60%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.42);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.28), 0 0 300px 200px rgba(20, 200, 40, 0.20);
}
/* 4. Target List — red left */
body.page-id-3973 .elementor-element-2a910e42::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; left: -200px; top: 50%; transform: translateY(-50%);
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
/* 5. Handled — green right */
body.page-id-3973 .elementor-element-83f8a777::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; right: -200px; top: 50%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* 6. Harden The Door — green left */
body.page-id-3973 .elementor-element-02517e5e::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; left: -200px; top: 50%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* 7. The Door Bot Sees — red left + green right */
body.page-id-3973 .elementor-element-7150c235::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; left: -200px; top: 50%; transform: translateY(-50%);
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
body.page-id-3973 .elementor-element-7150c235::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; right: -200px; top: 50%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* 8. Defence Logic — green right */
body.page-id-3973 .elementor-element-d4218637::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; right: -200px; top: 50%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.42);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.28), 0 0 300px 200px rgba(20, 200, 40, 0.20);
}
/* 9. Patching Heartbeat — green left */
body.page-id-3973 .elementor-element-fbe98c2b::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; left: -200px; top: 50%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* 10. Everything That Keeps You Safe — green both sides */
body.page-id-3973 .elementor-element-0326b676::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; left: -200px; top: 30%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.42);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.28), 0 0 300px 200px rgba(20, 200, 40, 0.20);
}
body.page-id-3973 .elementor-element-0326b676::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; right: -200px; top: 70%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.42);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.28), 0 0 300px 200px rgba(20, 200, 40, 0.20);
}
/* 11. Dispatches From The War — red left */
body.page-id-3973 .elementor-element-45e51411::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; left: -200px; top: 50%; transform: translateY(-50%);
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
/* 12. Mythos — red left + green right */
body.page-id-3973 .elementor-element-4f817c72::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; left: -200px; top: 40%; transform: translateY(-50%);
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
body.page-id-3973 .elementor-element-4f817c72::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; right: -200px; top: 60%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* 13. Sitting Duck CTA — red left + green right */
body.page-id-3973 .elementor-element-3a8e0f68::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; left: -200px; top: 50%; transform: translateY(-50%);
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
body.page-id-3973 .elementor-element-3a8e0f68::after {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1; right: -200px; top: 50%; transform: translateY(-50%);
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
/* --- Overwatch heading font normalisation --- */
/* TODO: element-id -> stable wsr-* class */
body.page-id-3973 h3,
body.page-id-3973 h4 {
font-family: 'alfabet-light', 'Alfabet', sans-serif !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
}
body.page-id-3973 h3,
body.page-id-3973 h3.elementor-heading-title {
font-size: clamp(22px, 2.2vw, 30px) !important;
line-height: 1.25 !important;
}
/* Overwatch image + button hover glows */
body.page-id-3973 .elementor-button,
body.page-id-3973 a[class*="button"] {
transition: box-shadow 0.3s ease, transform 0.2s ease;
}
body.page-id-3973 .elementor-button:hover,
body.page-id-3973 a[class*="button"]:hover {
box-shadow: 0 0 30px rgba(153, 252, 46, 0.5), 0 0 60px rgba(153, 252, 46, 0.25);
transform: translateY(-1px);
}
/* =========================================================================
12. RESPONSIVE (largest breakpoint first) [OV/CT — identical]
========================================================================= */
@media screen and (min-width: 1700px) {
.banner-text h1 { font-size: 3.8rem !important; }
h2.elementor-heading-title { font-size: 5rem !important; }
.ai-attacks-section .al-text-div { max-width: 756px; }
}
@media screen and (min-width: 1300px) {
.site-header .site-navigation ul.menu li a { font-size: clamp(1rem, 1.2vw, 1.25rem); }
}
@media screen and (max-width: 1290px) {
.ai-attacks-section .al-text-div { max-width: 420px; }
.ai-attacks-section .al-text-div h2 { font-size: 42px !important; }
.ai-attacks-section .al-text-div p { font-size: 15px !important; }
.right-img-content,
.left-img-content { gap: 10px !important; }
.header-img-text h2 { font-size: 2.9rem; }
.home-banner p { font-size: 1rem !important; }
.text-style2 { width: 100% !important; margin: auto !important; padding: 0 15px !important; font-size: 20px !important; }
.pr-15 { padding-right: 15px !important; }
.mobile-gap0 > .e-con-inner { gap: 0px !important; }
.site-header .site-navigation ul.menu li a { font-size: 15px; }
}
@media screen and (max-width: 1199px) {
.site-navigation-dropdown ul.menu li.current-menu-item a {
background: var(--e-global-color-secondary);
background-color: transparent;
background-image: linear-gradient(180deg, var(--e-global-color-secondary) 0%, var(--e-global-color-fc0c325) 100%);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: var(--e-global-color-fc0c325);
}
.site-header .site-navigation ul.menu li:last-child a { margin-left: 0; }
.site-navigation ul.menu li a { display: block; padding: 8px 10px; }
.ptb-90 { padding-top: 50px !important; padding-bottom: 50px !important; }
.pb-90 { padding-bottom: 50px !important; }
.pt-90 { padding-top: 50px !important; }
.form-gradient-section > div { padding: 15px 0px !important; }
}
@media screen and (max-width: 1025px) {
.btn-style, .ebtn-style a, .ebtn-style2 a { font-size: 16px !important; }
body,
.post-card .post-excerpt,
.contact-form label { font-size: 1rem !important; }
.elementor-kit-7 h2:not(.site-footer h2),
h2:not(.site-footer h2),
.post-card h3 { font-size: 36px !important; }
.post-card .add-text { font-size: 22px !important; }
}
@media screen and (max-width: 991px) {
.filter-bar, .filter-buttons { flex-direction: column; }
.filter-search #post-search { width: 100%; }
.ai-attacks-section .al-text-div { max-width: 276px; padding-bottom: 0px; }
.ai-attacks-section .al-text-div h2 { font-size: 28px !important; }
.ai-attacks-section .al-text-div p { font-size: 14px !important; margin-bottom: 0; }
.mobile-mt0 { margin-top: 0px !important; }
.site-footer { padding-top: 3rem; }
.red-tabs .e-n-tabs-content h3 { font-size: 2rem !important; }
.site-footer li { text-align: center; }
.footer-copyright { flex-direction: column; }
.footerinfo { text-align: center; }
ul.footer-logos, ul.footer-socials { justify-content: center; }
ul#menu-footer-privacy-links { justify-content: center; flex-direction: column; gap: 0; margin-top: 10px; }
}
@media screen and (max-width: 768px) {
.circle { max-width: 70%; margin: 0 auto; }
.post-card { width: 100%; }
.ai-svg-image svg { width: 100vw; }
.post-featured-image { border-radius: 20px; margin-top: 40px; }
.settlement-text { margin-top: 40px; }
.case-studies-content h3 { margin: 15px 0 10px; font-size: 22px; }
.certified-content h2 { font-size: 30px; }
.certified-content p { margin: 10px 0 15px; font-size: 17px; }
.certified-content { margin-top: 60px; padding: 50px 15px; }
.related-title { margin: 60px 0 20px; font-size: 30px; }
.post-img { display: flex !important; height: auto !important; }
.post-card img { max-height: 100% !important; height: auto !important; }
.header-img-text h2 { font-size: 24px; }
.left-img-content > .elementor-element:last-child { order: -1; }
.home-banner-h1 > .elementor-image-box-wrapper > .elementor-image-box-img {
float: unset !important; width: 62px !important; margin-right: 0px !important; margin-bottom: 10px !important;
}
.red-tabs .e-n-tabs-heading > .e-n-tab-title { min-width: 100% !important; }
.red-tabs .e-n-tabs-heading { display: flex !important; gap: 0 !important; }
.red-tabs .tab-content > .elementor-element .elementor-element { padding: 0px !important; }
.home-banner-h1 h1,
.elementor-kit-7 h1 { font-size: 30px !important; text-align: center !important; }
.elementor-kit-7 h2:not(.site-footer h2),
h2:not(.site-footer h2),
.post-card h3 { font-size: 30px !important; }
.post-card .add-text { font-size: 20px !important; }
.red-tabs .e-n-tabs-content h3,
.settlement-text, .case-studies-content h2 { font-size: 25px !important; }
.form-row-6 { flex-basis: 100%; }
.main-menu-contact.ebtn-style2 a {
margin: 15px;
background: linear-gradient(272.73deg, #02D05A 0%, #99FC2E 110.62%) !important;
}
/* Trust strip responsive */
.wsr-trust-badges { gap: 8px; }
.wsr-trust-badge { padding: 8px 14px; font-size: 0.78rem; }
.wsr-testimonials-inner { padding: 25px 20px; }
.wsr-testimonial-quote { font-size: 0.95rem; }
.wsr-testimonials { min-height: 190px; }
.wsr-testimonial-bigquote { font-size: 3rem; }
/* Heading normalisation (from OV/CT §16) */
h2,
.elementor-heading-title,
h2.elementor-heading-title { font-size: 2.2rem !important; }
}
@media screen and (max-width: 580px) {
.ai-attacks-section .al-text-div {
position: relative !important; max-width: 100%; order: -1; padding-bottom: 30px;
top: unset; left: unset; transform: unset; z-index: 9;
}
.year-broch { transform: translateX(-50%); right: unset !important; left: 50% !important; }
}
@media screen and (max-width: 480px) {
.site-header .header-inner .site-branding .site-logo img { max-width: 130px; }
.elementor-kit-7 h2:not(.site-footer h2),
h2:not(.site-footer h2),
.post-card h3 { font-size: 26px !important; }
.red-tabs .e-n-tabs-content h3,
.settlement-text, .case-studies-content h2 { font-size: 22px !important; }
/* Trust strip responsive */
.wsr-trust-badges { flex-direction: column; align-items: center; }
.wsr-trust-badge { width: 100%; max-width: 300px; justify-content: center; }
.wsr-testimonials { min-height: 240px; }
.wsr-testimonials-inner::after,
.wsr-corner-br { display: none; }
}
/* =========================================================================
13. SECTION-LEVEL CTAs + STICKY CTA [OV/CT]
Injected by overrides.js. NOTE: .wsr-sticky-cta is DEFINED here but KILLED
in §22 (display:none, Dave 2026-04-24) — see report §c.
========================================================================= */
.wsr-section-cta-wrap {
display: flex !important;
justify-content: center !important;
margin-top: clamp(32px, 3.5vw, 56px) !important;
margin-bottom: clamp(16px, 2vw, 32px) !important;
position: relative !important;
z-index: 3 !important;
}
.wsr-section-cta {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
padding: 15px 30px !important;
font-family: 'Poppins', sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
letter-spacing: 0.01em !important;
text-decoration: none !important;
border-radius: 999px !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease !important;
white-space: nowrap !important;
}
.wsr-section-cta svg { flex-shrink: 0; transition: transform 0.3s ease; }
.wsr-section-cta:hover svg { transform: translateX(4px); }
.wsr-section-cta--scan {
background: linear-gradient(135deg, rgba(153, 252, 46, 1) 0%, rgba(2, 208, 90, 1) 100%) !important;
color: #0a0a0a !important;
box-shadow: 0 0 0 1px rgba(153, 252, 46, 0.4), 0 0 24px rgba(153, 252, 46, 0.35), 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}
.wsr-section-cta--scan:hover {
transform: translateY(-2px) scale(1.03) !important;
box-shadow: 0 0 0 1px rgba(153, 252, 46, 0.7), 0 0 40px rgba(153, 252, 46, 0.6), 0 0 80px rgba(153, 252, 46, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
.wsr-section-cta--signup {
background: rgba(153, 252, 46, 0.08) !important;
color: #99FC2E !important;
border: 1.5px solid rgba(153, 252, 46, 0.6) !important;
box-shadow: 0 0 20px rgba(153, 252, 46, 0.15) !important;
}
.wsr-section-cta--signup:hover {
background: rgba(153, 252, 46, 0.18) !important;
color: #ccff6a !important;
border-color: rgba(153, 252, 46, 1) !important;
transform: translateY(-2px) !important;
box-shadow: 0 0 30px rgba(153, 252, 46, 0.35), 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}
.wsr-section-cta--learn {
background: transparent !important;
color: rgba(255, 255, 255, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.wsr-section-cta--learn:hover {
background: rgba(255, 255, 255, 0.05) !important;
color: #E8E6E1 !important;
border-color: rgba(153, 252, 46, 0.5) !important;
transform: translateY(-2px) !important;
}
.wsr-sticky-cta {
position: fixed !important;
bottom: clamp(20px, 3vw, 36px) !important;
right: clamp(20px, 3vw, 36px) !important;
z-index: 9999 !important;
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
padding: 16px 28px !important;
background: linear-gradient(135deg, rgba(153, 252, 46, 1) 0%, rgba(2, 208, 90, 1) 100%) !important;
color: #0a0a0a !important;
font-family: 'Poppins', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: 0.01em !important;
text-decoration: none !important;
border-radius: 999px !important;
box-shadow: 0 0 0 1px rgba(153, 252, 46, 0.4), 0 0 30px rgba(153, 252, 46, 0.5), 0 0 60px rgba(153, 252, 46, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
cursor: pointer !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
animation: wsr-sticky-cta-pulse 2.4s ease-in-out infinite !important;
}
.wsr-sticky-cta:hover {
transform: translateY(-3px) scale(1.04) !important;
box-shadow: 0 0 0 2px rgba(153, 252, 46, 0.7), 0 0 50px rgba(153, 252, 46, 0.8), 0 0 100px rgba(153, 252, 46, 0.45), 0 12px 30px rgba(0, 0, 0, 0.4) !important;
animation-play-state: paused !important;
}
.wsr-sticky-cta::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: #0a0a0a;
box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.3);
animation: wsr-sticky-cta-dot 1.4s ease-in-out infinite;
}
@keyframes wsr-sticky-cta-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(153, 252, 46, 0.4), 0 0 30px rgba(153, 252, 46, 0.5), 0 0 60px rgba(153, 252, 46, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35); }
50% { box-shadow: 0 0 0 1px rgba(153, 252, 46, 0.7), 0 0 45px rgba(153, 252, 46, 0.7), 0 0 90px rgba(153, 252, 46, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4); }
}
@keyframes wsr-sticky-cta-dot {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.2); opacity: 1; }
}
@media (max-width: 480px) {
.wsr-sticky-cta { padding: 12px 18px !important; font-size: 13px !important; bottom: 12px !important; right: 12px !important; }
.wsr-sticky-cta::before { width: 8px; height: 8px; }
}
/* =========================================================================
14. WSR-ANIM FRAMEWORK + SCROLL REVEAL [OV/CT — identical]
SUPERSEDES the excluded wsr-anim-v2.css (report §c).
========================================================================= */
body.wsr-anim-ready .wsr-anim {
transition:
opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
filter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: var(--wsr-delay, 0ms);
will-change: opacity, transform;
}
body.wsr-anim-ready .wsr-anim-up:not(.wsr-in) { opacity: 0; transform: translateY(60px); }
body.wsr-anim-ready .wsr-anim-down:not(.wsr-in) { opacity: 0; transform: translateY(-60px); }
body.wsr-anim-ready .wsr-anim-left:not(.wsr-in) { opacity: 0; transform: translateX(-80px); }
body.wsr-anim-ready .wsr-anim-right:not(.wsr-in) { opacity: 0; transform: translateX(80px); }
body.wsr-anim-ready .wsr-anim-scale:not(.wsr-in) { opacity: 0; transform: scale(0.9); }
body.wsr-anim-ready .wsr-anim-swing:not(.wsr-in) {
opacity: 0;
transform: rotate(-4deg) translateY(40px);
transform-origin: top center;
}
body.wsr-anim-ready .wsr-anim.wsr-in,
body.wsr-anim-ready .wsr-anim-up.wsr-in,
body.wsr-anim-ready .wsr-anim-down.wsr-in,
body.wsr-anim-ready .wsr-anim-left.wsr-in,
body.wsr-anim-ready .wsr-anim-right.wsr-in,
body.wsr-anim-ready .wsr-anim-scale.wsr-in {
opacity: 1;
transform: translate(0, 0) scale(1);
}
body.wsr-anim-ready .wsr-anim-swing.wsr-in {
opacity: 1;
animation: wsr-anim-swing-in 0.95s cubic-bezier(0.68, -0.3, 0.27, 1.45) forwards;
}
@keyframes wsr-anim-swing-in {
0% { transform: rotate(-4deg) translateY(40px); opacity: 0; }
40% { opacity: 1; }
60% { transform: rotate(1.5deg) translateY(-2px); opacity: 1; }
100% { transform: rotate(0) translateY(0); opacity: 1; }
}
body:not(.wsr-anim-ready) .wsr-anim,
body:not(.wsr-anim-ready) .wsr-anim-up,
body:not(.wsr-anim-ready) .wsr-anim-left,
body:not(.wsr-anim-ready) .wsr-anim-right,
body:not(.wsr-anim-ready) .wsr-anim-scale,
body:not(.wsr-anim-ready) .wsr-anim-swing {
animation: wsr-anim-fallback 0.01s linear 4s forwards;
}
@keyframes wsr-anim-fallback {
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
body.wsr-anim-ready .wsr-anim,
body.wsr-anim-ready .wsr-anim-up,
body.wsr-anim-ready .wsr-anim-left,
body.wsr-anim-ready .wsr-anim-right,
body.wsr-anim-ready .wsr-anim-scale,
body.wsr-anim-ready .wsr-anim-swing {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
}
/* Legacy scroll-reveal (duplicate system, kept for backward compat) */
.wsr-reveal,
.wsr-reveal-left,
.wsr-reveal-right,
.wsr-reveal-up,
.wsr-reveal-swing,
.wsr-reveal-scale {
opacity: 0;
transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
filter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
.wsr-reveal { transform: translateY(40px); }
.wsr-reveal-left { transform: translateX(-80px); }
.wsr-reveal-right { transform: translateX(80px); }
.wsr-reveal-up { transform: translateY(60px); }
.wsr-reveal-swing { transform: rotate(-6deg) translateY(30px); transform-origin: top center; }
.wsr-reveal-scale { transform: scale(0.9); }
.wsr-reveal.in-view,
.wsr-reveal-left.in-view,
.wsr-reveal-right.in-view,
.wsr-reveal-up.in-view,
.wsr-reveal-scale.in-view {
opacity: 1;
transform: translate(0, 0) scale(1) rotate(0);
}
.wsr-reveal-swing.in-view {
opacity: 1;
animation: wsr-swing-in 1s cubic-bezier(0.68, -0.3, 0.27, 1.45) forwards;
}
@keyframes wsr-swing-in {
0% { transform: rotate(-6deg) translateY(30px); opacity: 0; }
40% { opacity: 1; }
60% { transform: rotate(2deg) translateY(-2px); opacity: 1; }
100% { transform: rotate(0) translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.wsr-reveal,
.wsr-reveal-left,
.wsr-reveal-right,
.wsr-reveal-up,
.wsr-reveal-swing,
.wsr-reveal-scale {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* =========================================================================
15. HOVER GLOWS + :has() BOXES [OV — fuller version supersedes CT subset]
report §c: [CT] had a smaller hover-glow block; kept the [OV] system.
========================================================================= */
.wsr-section-image,
.elementor-widget-image img {
transition: filter 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease;
filter: drop-shadow(0 0 0 rgba(153, 252, 46, 0));
}
/* TODO: element-id -> stable wsr-* class (page-id-3973 branch) */
.wsr-section-image:hover,
body.page-id-3973 .elementor-widget-image img:hover {
filter: drop-shadow(0 0 25px rgba(153, 252, 46, 0.4)) drop-shadow(0 0 50px rgba(153, 252, 46, 0.25));
transform: translateY(-4px) scale(1.015);
}
.green-gradient-box { transition: box-shadow 0.5s ease, transform 0.4s ease; }
.green-gradient-box:hover {
box-shadow: 0 0 40px rgba(2, 208, 90, 0.35), 0 0 80px rgba(2, 208, 90, 0.2);
transform: translateY(-2px);
}
/* TODO: element-id -> stable wsr-* class (page-id-3973 branch) */
.e-con:has(img):has([style*="border:"]),
.e-con:has(img).border-red-gradient,
.e-con:has(img).green-gradient-box,
.e-con:has(img)[style*="border"],
.elementor-element:has(img)[style*="border"],
.elementor-element.wsr-card:has(img),
.wsr-section-box:has(img),
body.page-id-3973 .e-con.e-child:has(img) {
transition:
transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.4s ease,
filter 0.4s ease !important;
position: relative;
overflow: visible;
}
.e-con:has(img)[style*="border"]:hover,
.elementor-element:has(img)[style*="border"]:hover,
.elementor-element.wsr-card:has(img):hover,
.wsr-section-box:has(img):hover,
body.page-id-3973 .e-con.e-child:has(img):hover,
.green-gradient-box:has(img):hover {
transform: translateY(-6px) scale(1.025) !important;
box-shadow:
0 0 0 1px rgba(153, 252, 46, 0.4),
0 0 60px rgba(153, 252, 46, 0.45),
0 0 120px rgba(153, 252, 46, 0.28),
0 20px 60px rgba(0, 0, 0, 0.4) !important;
z-index: 2 !important;
}
/* TODO: element-id -> stable wsr-* class (page-id-1234 branch) */
.wsr-attack-section .e-con:has(img):hover,
.wsr-attack-section .elementor-element:has(img):hover,
.border-red-gradient:has(img):hover,
.wsr-red-card:has(img):hover,
body.page-id-1234 .e-con.e-child:has(img):hover {
transform: translateY(-6px) scale(1.025) !important;
box-shadow:
0 0 0 1px rgba(255, 59, 29, 0.45),
0 0 60px rgba(255, 59, 29, 0.5),
0 0 120px rgba(218, 24, 27, 0.3),
0 20px 60px rgba(0, 0, 0, 0.5) !important;
z-index: 2 !important;
}
.e-con:has(img)[style*="border"]:hover img,
.elementor-element:has(img)[style*="border"]:hover img,
.wsr-section-box:has(img):hover img,
body.page-id-3973 .e-con.e-child:has(img):hover img {
filter: brightness(1.08) saturate(1.12) !important;
}
@supports not selector(:has(*)) {
.elementor-widget-image,
.wsr-section-box { transition: transform 0.4s, box-shadow 0.4s; }
.elementor-widget-image:hover,
.wsr-section-box:hover { transform: scale(1.02); box-shadow: 0 0 40px rgba(153, 252, 46, 0.3); }
}
/* =========================================================================
16. HEADING NORMALISATION [OV — broader supersedes CT h2.elementor only]
========================================================================= */
h2,
.elementor-heading-title,
h2.elementor-heading-title {
font-family: 'alfabet-light', 'Alfabet', sans-serif !important;
font-weight: 400 !important;
line-height: 1.15 !important;
letter-spacing: -0.005em !important;
}
/* wsr-headfix-20260902 — font-size moved to h2 ONLY.
`.elementor-heading-title` matches every heading widget (h3/h4/h5 too); with
!important it forced all of them to 60.8px from 768px up — 399 of 1264 headings
measured across 16 pages x 4 widths. Real damage on /home: "Monitoring" ran 63px
past the right edge at 834, "Persistence & Res..." ran off its card AND off screen
at 1280, numbered badges became ovals with the digits bursting out.
The family/weight/line-height/letter-spacing above STILL apply to ALL headings —
only the size coercion is narrowed, so each widget's authored Elementor size
applies again. Dropping the selector instead would have stripped the Alfabet
brand font off every h3/h4/h5 sitewide.
REVERT: move `font-size: 3.8rem !important;` back into the block above and delete
this rule. Full-file backup: overrides.css.bak-20260902-170236-sharedfix */
h2,
h2.elementor-heading-title {
font-size: 3.8rem !important;
}
/* (max-768 override lives in §12) */
/* =========================================================================
17. OVERWATCH 44f41602 COLUMN + HONEST POSITIONING [OV/CT]
========================================================================= */
/* TODO: element-id -> stable wsr-* class */
.elementor-element-44f41602 {
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
}
.elementor-element-44f41602 .elementor-widget-text-editor p {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
.elementor-element-44f41602 .elementor-widget-heading .elementor-heading-title {
text-align: left !important;
}
.wsr-2col-row::before,
.wsr-2col-row::after,
.wsr-text-col::before,
.wsr-text-col::after {
display: none !important;
}
.honest-positioning,
div[style*="HONEST POSITIONING"],
p:has(+ div[style*="HONEST POSITIONING"]) + div[style*="HONEST POSITIONING"] {
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
color: #aaa !important;
font-family: 'Poppins', sans-serif !important;
font-size: clamp(13px, 1.1vw, 15px) !important;
line-height: 1.6 !important;
letter-spacing: 0.02em !important;
border-top: 1px solid rgba(153, 252, 46, 0.12) !important;
padding-top: clamp(24px, 2.5vw, 36px) !important;
margin-top: clamp(40px, 4vw, 64px) !important;
}
.honest-positioning strong,
.honest-positioning .label {
color: #99FC2E !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
font-weight: 600 !important;
font-size: 0.82em !important;
display: block !important;
margin-bottom: 8px !important;
}
/* =========================================================================
18. WSR UTILITY BODY CLASSES [CT] (DORMANT — defined, not assigned)
Future glow system meant to replace the §10 page-id element-ID glows.
Kept because [CT] defines them; harmless until a page gets the body class.
========================================================================= */
.wsr-glow-host { position: relative !important; }
body.wsr-green-glow .wsr-glow-host::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(20, 200, 40, 0.35);
box-shadow: 0 0 500px 400px rgba(15, 150, 30, 0.22), 0 0 250px 180px rgba(20, 200, 40, 0.16);
left: -200px; top: 30%;
}
body.wsr-green-glow .wsr-hero-section .wsr-glow-host::before,
body.wsr-green-glow .wsr-glow-host.wsr-glow-strong::before {
background: rgba(20, 200, 40, 0.45);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.30), 0 0 300px 200px rgba(20, 200, 40, 0.22);
}
body.wsr-green-glow .wsr-cta-section .wsr-glow-host::before,
body.wsr-green-glow .wsr-glow-host.wsr-glow-medium::before {
background: rgba(20, 200, 40, 0.35);
box-shadow: 0 0 500px 400px rgba(15, 150, 30, 0.22), 0 0 250px 180px rgba(20, 200, 40, 0.16);
}
body.wsr-green-glow .wsr-glow-host.wsr-glow-right::before {
left: auto; right: -200px; top: 50%; transform: translateY(-50%);
}
body.wsr-green-glow .wsr-glow-host.wsr-glow-left::before {
right: auto; left: -200px; top: 30%; transform: none;
}
body.wsr-red-glow .wsr-glow-host::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
left: -200px; top: 30%;
}
body.wsr-red-glow .wsr-hero-section .wsr-glow-host::before,
body.wsr-red-glow .wsr-glow-host.wsr-glow-strong::before {
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
body.wsr-red-glow .wsr-cta-section .wsr-glow-host::before,
body.wsr-red-glow .wsr-glow-host.wsr-glow-medium::before {
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
}
body.wsr-red-glow .wsr-glow-host.wsr-glow-right::before {
left: auto; right: -200px; top: 50%; transform: translateY(-50%);
}
body.wsr-red-glow .wsr-glow-host.wsr-glow-left::before {
right: auto; left: -200px; top: 30%; transform: none;
}
.wsr-warn-glow.wsr-glow-host::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
background: rgba(220, 40, 30, 0.35);
box-shadow: 0 0 500px 400px rgba(220, 15, 18, 0.20), 0 0 250px 180px rgba(220, 40, 30, 0.14);
left: -200px; top: 30%;
}
.wsr-warn-glow.wsr-glow-host.wsr-glow-right::before {
left: auto; right: -200px; top: 50%; transform: translateY(-50%);
}
body.wsr-mixed .wsr-glow-host.wsr-glow-centered-green::before,
body.wsr-mixed .wsr-glow-host.wsr-glow-centered-red::before {
content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
pointer-events: none; z-index: 1;
left: 50%; top: 50%; transform: translate(-50%, -50%);
}
body.wsr-mixed .wsr-glow-host.wsr-glow-centered-green::before {
background: rgba(20, 200, 40, 0.40);
box-shadow: 0 0 600px 500px rgba(15, 150, 30, 0.28), 0 0 300px 200px rgba(20, 200, 40, 0.20);
}
body.wsr-mixed .wsr-glow-host.wsr-glow-centered-red::before {
background: rgba(220, 40, 30, 0.40);
box-shadow: 0 0 600px 500px rgba(220, 15, 18, 0.25), 0 0 300px 200px rgba(220, 40, 30, 0.18);
}
/* =========================================================================
19. WSR COMPONENT LIBRARY [CT] (.wsr-comp-*, cards, grids)
========================================================================= */
.wsr-comp-title-centered {
text-align: center; max-width: 860px; margin-left: auto; margin-right: auto;
padding: clamp(48px, 5vw, 80px) 24px clamp(24px, 3vw, 40px);
}
.wsr-comp-title-centered .elementor-heading-title {
font-family: 'Alfabet', sans-serif; font-size: clamp(36px, 5vw, 64px);
font-weight: 700; line-height: 1.15; color: #E8E6E1; letter-spacing: -0.01em;
}
.wsr-comp-title-centered .elementor-heading-title span { color: #99FC2E; }
.wsr-comp-honest-pos {
max-width: 860px; margin-left: auto; margin-right: auto; text-align: center;
padding: clamp(40px, 4vw, 64px) 24px; border-top: 1px solid rgba(153, 252, 46, 0.15);
}
.wsr-comp-honest-pos-label {
color: #99FC2E; font-family: 'Alfabet', sans-serif; font-size: clamp(13px, 1vw, 15px);
font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; margin-bottom: 16px;
}
.wsr-comp-honest-pos-body {
color: rgba(255, 255, 255, 0.72); font-family: 'Inter Tight', sans-serif;
font-size: clamp(18px, 1.6vw, 24px); line-height: 1.55; text-align: center;
}
.wsr-comp-title-para-centered {
text-align: center; max-width: 860px; margin-left: auto; margin-right: auto;
padding: clamp(48px, 5vw, 80px) 24px clamp(32px, 3vw, 48px);
}
.wsr-comp-title-para-centered .elementor-heading-title {
font-family: 'Alfabet', sans-serif; font-size: clamp(36px, 5vw, 64px); font-weight: 700;
line-height: 1.15; color: #E8E6E1; letter-spacing: -0.01em; margin-bottom: clamp(24px, 3vw, 40px);
}
.wsr-comp-title-para-centered .elementor-heading-title span { color: #99FC2E; }
.wsr-comp-title-para-centered .ow-intro-block,
.wsr-comp-title-para-centered .elementor-widget-text-editor { max-width: 720px; margin-left: auto; margin-right: auto; }
.wsr-comp-title-para-centered p.ow-intro,
.wsr-comp-title-para-centered .elementor-widget-text-editor p {
color: rgba(255, 255, 255, 0.75); font-family: 'Inter Tight', sans-serif;
font-size: clamp(15px, 1.2vw, 18px); line-height: 1.7; text-align: center; margin-bottom: 1.2em;
}
.wsr-comp-pipeline-col {
display: flex; flex-direction: column; justify-content: flex-start;
padding: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px);
}
.wsr-comp-pipeline-title {
color: #99FC2E; font-family: 'Alfabet', sans-serif; font-size: clamp(22px, 2vw, 30px);
font-weight: 700; text-align: left; margin-bottom: 20px; line-height: 1.2;
}
.wsr-comp-pipeline-label {
color: #99FC2E; font-family: 'Inter Tight', sans-serif; font-size: clamp(15px, 1.1vw, 18px);
font-weight: 700; text-align: left; margin-top: 14px; margin-bottom: 2px;
}
.wsr-comp-pipeline-body {
color: #cccccc; font-family: 'Inter Tight', sans-serif; font-size: clamp(14px, 1vw, 16px);
text-align: left; margin-bottom: 8px; line-height: 1.55;
}
.wsr-comp-pipeline-cta-row { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.wsr-comp-pipeline-image-col { display: flex; align-items: stretch; }
.wsr-comp-pipeline-image-col img,
.wsr-comp-pipeline-image-col .elementor-widget-image,
.wsr-comp-pipeline-image-col .elementor-widget-container {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.wsr-feature-grid {
display: grid !important; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.5vw, 24px); max-width: 100%; margin: clamp(40px, 4vw, 70px) auto 0;
}
@media (max-width: 1024px) { .wsr-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wsr-feature-grid { grid-template-columns: 1fr; } }
.wsr-feature-card {
padding: clamp(22px, 2vw, 32px) !important;
background: linear-gradient(145deg, rgba(18,18,18,0.6), rgba(10,10,10,0.8)) !important;
border: 1px solid rgba(153, 252, 46, 0.22) !important;
border-radius: 14px !important;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.wsr-feature-card:hover {
transform: translateY(-2px); border-color: rgba(153, 252, 46, 0.55) !important;
box-shadow: 0 8px 28px rgba(153, 252, 46, 0.10);
}
.wsr-feature-card .elementor-heading-title {
color: #E8E6E1 !important; font-size: clamp(17px, 1.4vw, 20px) !important; font-weight: 700 !important;
font-family: Poppins, sans-serif !important; margin: 0 !important; line-height: 1.3;
}
.wsr-feature-card .elementor-heading-title::before { content: "\2713 "; color: #99FC2E; font-weight: 700; }
.wsr-feature-card .elementor-widget-text-editor p {
color: #cccccc !important; font-size: clamp(14px, 1.15vw, 16px) !important;
line-height: 1.55; margin: 0 !important; font-family: Poppins, sans-serif !important;
}
.wsr-comp-green-cta {
text-align: center; padding: 80px 40px;
background: linear-gradient(144.16deg, rgba(28,28,28,0.1) 6.82%, rgba(2,208,90,0.45) 85.86%);
border: 2px solid rgba(153,252,46,0.5); backdrop-filter: blur(150px); border-radius: 40px;
overflow: hidden; transition: box-shadow 0.5s ease, transform 0.4s ease;
}
.wsr-comp-green-cta:hover {
box-shadow: 0 0 40px rgba(2,208,90,0.35), 0 0 80px rgba(2,208,90,0.2); transform: translateY(-2px);
}
.wsr-comp-green-cta p { margin: 22px 0 35px; font-family: "Helvetica", Sans-serif !important; }
.wsr-comp-green-cta h2 { margin: 0; }
@media (max-width: 768px) { .wsr-comp-green-cta { padding: 50px 24px; border-radius: 24px; } }
.wsr-comp-button-pair { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
@media (max-width: 480px) {
.wsr-comp-button-pair { flex-direction: column; align-items: stretch; }
.wsr-comp-button-pair .ebtn-style a,
.wsr-comp-button-pair .ebtn-style2 a { width: 100%; text-align: center; }
}
.wsr-comp-hero-wash { position: relative; overflow: hidden; min-height: 85vh; }
.wsr-comp-hero-wash::before {
content: ""; position: absolute; top: -200px; right: -300px; width: 900px; height: 900px;
border-radius: 50%; pointer-events: none; z-index: 0; background: transparent;
box-shadow: 0 0 600px 400px rgba(219,60,26,0.35), 0 0 300px 200px rgba(255,80,30,0.25);
}
.wsr-comp-hero-wash > .e-con-inner { position: relative; z-index: 1; }
@media (max-width: 768px) {
.wsr-comp-hero-wash { min-height: 70vh; }
.wsr-comp-hero-wash::before { width: 500px; height: 500px; right: -150px; top: -100px; }
}
.wsr-comp-attack-boxes { position: relative; overflow: visible; }
.wsr-comp-attack-boxes::before {
content: ""; position: absolute; left: -900px; top: 200px; width: 900px; height: 900px;
border-radius: 50%; pointer-events: none; z-index: -1; background: transparent;
box-shadow: 0 0 600px 400px rgba(218,24,27,0.25), 0 0 300px 200px rgba(255,59,29,0.18);
}
.wsr-comp-attack-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.wsr-attack-card {
background: linear-gradient(103.84deg, rgba(0,0,0,0.15) 6.18%, rgba(218,24,27,0.2) 97.68%);
backdrop-filter: blur(50px); border: 2px solid rgba(200,16,19,0.5); border-radius: 12px;
padding: 24px; transition: background 0.3s ease-out; overflow: hidden; position: relative;
}
.wsr-attack-card::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(103.84deg, rgba(0,0,0,0.15) 6.18%, rgba(218,24,27,0.67) 97.68%);
opacity: 0; z-index: 0; transition: opacity 0.3s ease-out;
}
.wsr-attack-card:hover::before { opacity: 1; }
.wsr-attack-card h3 {
color: rgba(255,59,29,1) !important; -webkit-text-fill-color: rgba(255,59,29,1) !important;
position: relative; z-index: 1;
}
.wsr-attack-card > * { position: relative; z-index: 1; }
@media (max-width: 1024px) { .wsr-comp-attack-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .wsr-comp-attack-grid { grid-template-columns: 1fr; } }
.wsr-comp-stat-card {
text-align: center; padding: 40px 28px;
background: linear-gradient(145deg, rgba(18,18,18,0.6), rgba(10,10,10,0.8));
border: 1px solid rgba(153,252,46,0.25); border-radius: 18px;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.wsr-comp-stat-card:hover {
transform: translateY(-3px); border-color: rgba(153,252,46,0.6); box-shadow: 0 10px 30px rgba(153,252,46,0.15);
}
.wsr-comp-stat-card .wsr-stat-number {
font-family: Poppins, sans-serif !important; font-size: clamp(42px, 5vw, 72px) !important;
font-weight: 800 !important; line-height: 1 !important;
background: linear-gradient(135deg, #99FC2E 0%, #02D05A 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
margin: 0 0 8px !important;
}
.wsr-comp-stat-card .wsr-stat-label {
font-family: Poppins, sans-serif !important; font-size: 14px !important; text-transform: uppercase;
letter-spacing: 1.5px; color: #99FC2E !important; margin: 0 0 14px !important;
}
.wsr-comp-stat-card .wsr-stat-desc { color: #cccccc; font-size: 15px; line-height: 1.55; margin: 0; }
.wsr-comp-pricing-tier {
padding: 40px 32px; background: linear-gradient(145deg, rgba(18,18,18,0.7), rgba(8,8,8,0.9));
border: 2px solid rgba(153,252,46,0.3); border-radius: 20px; text-align: center;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; position: relative;
}
.wsr-comp-pricing-tier:hover {
transform: translateY(-4px); border-color: rgba(153,252,46,0.7); box-shadow: 0 14px 40px rgba(2,208,90,0.18);
}
.wsr-comp-pricing-tier.featured {
border-color: #99FC2E; box-shadow: 0 0 0 1px #99FC2E, 0 14px 40px rgba(2,208,90,0.25);
}
.wsr-comp-pricing-tier .wsr-tier-name {
font-family: Poppins, sans-serif !important; font-size: 18px !important; text-transform: uppercase;
letter-spacing: 2px; color: #99FC2E !important; margin: 0 0 10px !important;
}
.wsr-comp-pricing-tier .wsr-tier-price {
font-family: Poppins, sans-serif !important; font-size: clamp(38px, 4.5vw, 56px) !important;
font-weight: 800 !important; color: #E8E6E1 !important; margin: 0 0 4px !important; line-height: 1;
}
.wsr-comp-pricing-tier .wsr-tier-period { color: #888; font-size: 14px; margin: 0 0 24px; }
.wsr-comp-pricing-tier .wsr-tier-features { list-style: none; padding: 0; margin: 0 0 28px; text-align: left; }
.wsr-comp-pricing-tier .wsr-tier-features li {
color: #cccccc; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 15px;
}
.wsr-comp-pricing-tier .wsr-tier-features li::before { content: "\2713 "; color: #99FC2E; font-weight: 700; }
.wsr-comp-testimonial-card {
padding: 32px; background: linear-gradient(145deg, rgba(20,20,20,0.7), rgba(10,10,10,0.85));
border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.wsr-comp-testimonial-card:hover { border-color: rgba(153,252,46,0.35); transform: translateY(-2px); }
.wsr-comp-testimonial-card .wsr-quote {
font-family: Poppins, sans-serif; font-size: 16px; line-height: 1.65; color: #e8e8e8;
margin: 0 0 22px; font-style: italic; position: relative; padding-left: 28px;
}
.wsr-comp-testimonial-card .wsr-quote::before {
content: "\201C"; position: absolute; left: 0; top: -10px; font-size: 48px; color: #99FC2E;
line-height: 1; font-family: Georgia, serif;
}
.wsr-comp-testimonial-card .wsr-stars { color: #99FC2E; font-size: 16px; letter-spacing: 2px; margin: 0 0 14px; }
.wsr-comp-testimonial-card .wsr-author { display: flex; align-items: center; gap: 14px; }
.wsr-comp-testimonial-card .wsr-author-photo {
width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(153,252,46,0.4);
}
.wsr-comp-testimonial-card .wsr-author-meta { display: flex; flex-direction: column; }
.wsr-comp-testimonial-card .wsr-author-name { color: #E8E6E1; font-weight: 600; font-size: 15px; }
.wsr-comp-testimonial-card .wsr-author-role { color: #888; font-size: 13px; }
.wsr-comp-numbered-step {
display: flex; gap: 22px; align-items: flex-start; padding: 24px;
background: linear-gradient(145deg, rgba(18,18,18,0.5), rgba(10,10,10,0.7));
border: 1px solid rgba(153,252,46,0.18); border-radius: 14px;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.wsr-comp-numbered-step:hover { border-color: rgba(153,252,46,0.5); transform: translateX(4px); }
.wsr-comp-numbered-step .wsr-step-num {
flex: 0 0 auto; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; background: linear-gradient(135deg, #99FC2E 0%, #02D05A 100%); color: #000;
font-family: Poppins, sans-serif; font-weight: 800; font-size: 22px; box-shadow: 0 0 20px rgba(153,252,46,0.4);
}
.wsr-comp-numbered-step .wsr-step-body { flex: 1 1 auto; }
.wsr-comp-numbered-step .wsr-step-title {
color: #E8E6E1; font-family: Poppins, sans-serif; font-size: 18px; font-weight: 700; margin: 0 0 6px;
}
.wsr-comp-numbered-step .wsr-step-desc { color: #cccccc; font-size: 15px; line-height: 1.55; margin: 0; }
.wsr-comp-icon-card {
text-align: center; padding: 32px 24px;
background: linear-gradient(145deg, rgba(18,18,18,0.6), rgba(10,10,10,0.8));
border: 1px solid rgba(153,252,46,0.22); border-radius: 14px;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.wsr-comp-icon-card:hover {
transform: translateY(-3px); border-color: rgba(153,252,46,0.55); box-shadow: 0 10px 28px rgba(153,252,46,0.12);
}
.wsr-comp-icon-card .wsr-icon-wrap {
width: 64px; height: 64px; margin: 0 auto 18px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 14px; background: linear-gradient(135deg, rgba(153,252,46,0.18), rgba(2,208,90,0.12));
border: 1px solid rgba(153,252,46,0.35); color: #99FC2E; font-size: 28px;
}
.wsr-comp-icon-card .wsr-icon-title {
color: #E8E6E1; font-family: Poppins, sans-serif; font-size: 18px; font-weight: 700; margin: 0 0 10px;
}
.wsr-comp-icon-card .wsr-icon-desc { color: #cccccc; font-size: 14px; line-height: 1.55; margin: 0; }
.wsr-lib-divider {
margin: 60px 0 18px !important; padding: 14px 18px !important;
background: rgba(153,252,46,0.06); border-left: 4px solid #99FC2E; border-radius: 4px;
}
.wsr-lib-divider .elementor-heading-title,
.wsr-lib-divider h2 {
color: #99FC2E !important; font-family: Poppins, sans-serif !important; font-size: 20px !important;
text-transform: uppercase !important; letter-spacing: 2px !important; margin: 0 !important;
}
.wsr-lib-label .elementor-heading-title,
.wsr-lib-label h3 {
color: #888 !important; font-family: monospace !important; font-size: 13px !important;
margin: 24px 0 10px !important; text-transform: lowercase !important;
}
/* =========================================================================
20. BACK TO TOP BUTTON [OV/CT]
========================================================================= */
.wsr-back-to-top {
position: fixed; bottom: 30px; width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(10, 60, 20, 0.85); border: 2px solid #99fc2e; border-radius: 50%;
color: #99fc2e; text-decoration: none; z-index: 9999;
opacity: 0; transform: translateY(20px); transition: all 0.3s ease; pointer-events: none;
}
.wsr-btt-left { left: 30px; }
.wsr-btt-right { right: 30px; }
.wsr-back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wsr-back-to-top:hover { background: #99fc2e; color: #0a1e0a; box-shadow: 0 0 18px rgba(153, 252, 46, 0.6); }
/* =========================================================================
21. LEGAL PAGES [ST] (Customizer "Additional CSS", post 1288)
Footer V2 rules from [ST] folded into §0/§9 (report §c).
url() RELATIVISED: Green_InnerBanner_Bg.svg theme asset → assets/img/ (report §d).
========================================================================= */
body.page-id-3813:before,
body.page-id-3815:before,
body.page-id-3816:before {
background-image: url(img/Green_InnerBanner_Bg.svg) !important;
top: -50px !important;
}
body.page-id-3813 .wsr-legal-hero,
body.page-id-3815 .wsr-legal-hero,
body.page-id-3816 .wsr-legal-hero {
background: none !important;
}
/* Remove red glow from hero (keep green only) */
/* TODO: element-id -> stable wsr-* class */
.elementor-element-a9e1be4:before {
display: none !important;
}
/* =========================================================================
22. DAVE 2026-04-24 FIXES [CT]
========================================================================= */
/* Kill sticky Start Free Scan button (defined §13 — resolved OFF here) */
.wsr-sticky-cta, .wsr-sticky-scan-btn, a[href*="free-scan"].sticky-cta, #wsr-sticky-cta { display: none !important; }
/* E-Book (2832): decorative blob pseudo-elements behind images/text */
body.page-id-2832 .elementor-element::before,
body.page-id-2832 .elementor-element::after,
body.page-id-2832 .e-con::before,
body.page-id-2832 .e-con::after { z-index: -1 !important; }
body.page-id-2832 .elementor-element { isolation: isolate; }
body.page-id-2832 .elementor-widget-image,
body.page-id-2832 img { position: relative; z-index: 2; }
/* Threats (1234): no glow on the images themselves, only container glows */
body.page-id-1234 .elementor-widget-image img,
body.page-id-1234 .elementor-widget-image:hover img,
body.page-id-1234 .e-con.e-child:hover img {
filter: none !important; box-shadow: none !important; outline: none !important;
}
/* TODO: element-id -> stable wsr-* class */
body.page-id-1234 .elementor-widget-image.image-hover-effect:hover,
body.page-id-1234 .e-con.e-child:has(> .elementor-widget-image):hover,
body.page-id-1234 .elementor-element-c169d54:hover,
body.page-id-1234 .elementor-element-439e8cd:hover,
body.page-id-1234 .elementor-element-9be0646:hover,
body.page-id-1234 .elementor-element-32852b0:hover {
box-shadow: none !important; transform: none !important; outline: none !important; filter: none !important;
}
body.page-id-1234 .e-con.e-child:has(.elementor-widget-image):hover,
body.page-id-1234 .e-con:has(.elementor-widget-image):hover,
body.page-id-1234 .elementor-widget-image:hover {
box-shadow: none !important; transform: none !important; outline: none !important; filter: none !important;
}
/* =========================================================================
23. SCANNER PAGE [SC] (scan.css — unique, no conflicts)
========================================================================= */
.wsr-scan-container { max-width: 900px; margin: 0 auto; padding: 40px 20px; font-family: inherit; }
.wsr-scan-form-wrap {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px;
padding: 50px 40px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.wsr-scan-title { color: #E8E6E1; font-size: 2.2rem; margin-bottom: 10px; }
.wsr-scan-subtitle { color: #a0aec0; font-size: 1.1rem; margin-bottom: 30px; }
.wsr-input-group { display: flex; gap: 12px; max-width: 600px; margin: 0 auto 20px; }
.wsr-input-group input {
flex: 1; padding: 16px 20px; font-size: 1rem; border: 2px solid #2d3748; border-radius: 8px;
background: #0d1117; color: #E8E6E1; outline: none; transition: border-color 0.3s;
}
.wsr-input-group input:focus { border-color: #e53e3e; }
.wsr-input-group button {
padding: 16px 32px; font-size: 1rem; font-weight: 600;
background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); color: #E8E6E1; border: none;
border-radius: 8px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; white-space: nowrap;
}
.wsr-input-group button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(229, 62, 62, 0.4); }
.wsr-input-group button:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.wsr-scan-note { color: #718096; font-size: 0.9rem; }
.wsr-scan-progress { margin-top: 30px; padding: 30px; background: #1a1a2e; border-radius: 12px; }
.progress-bar { height: 8px; background: #2d3748; border-radius: 4px; overflow: hidden; margin-bottom: 15px; }
.progress-fill {
height: 100%; width: 0%; background: linear-gradient(90deg, #e53e3e, #ed8936);
border-radius: 4px; transition: width 0.5s ease; animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.progress-text { color: #a0aec0; font-size: 0.95rem; margin: 0; }
.wsr-scan-results { margin-top: 30px; background: #1a1a2e; border-radius: 12px; padding: 30px; text-align: left; }
.wsr-scan-results h3 { color: #E8E6E1; margin-top: 0; margin-bottom: 20px; font-size: 1.4rem; }
.result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.result-target { color: #a0aec0; font-size: 0.95rem; word-break: break-all; }
.risk-badge { padding: 8px 20px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; }
.risk-critical { background: #c53030; color: #E8E6E1; }
.risk-high { background: #dd6b20; color: #E8E6E1; }
.risk-medium { background: #d69e2e; color: #1a1a2e; }
.risk-low { background: #38a169; color: #E8E6E1; }
.risk-minimal { background: #2d3748; color: #a0aec0; }
.result-section { margin-bottom: 25px; }
.result-section h4 { color: #e2e8f0; font-size: 1.1rem; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #2d3748; }
.finding-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #0d1117; border-radius: 8px; margin-bottom: 10px; }
.finding-severity { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; flex-shrink: 0; }
.severity-critical { background: rgba(197, 48, 48, 0.2); color: #fc8181; }
.severity-high { background: rgba(221, 107, 32, 0.2); color: #fbd38d; }
.severity-medium { background: rgba(214, 158, 46, 0.2); color: #faf089; }
.severity-low { background: rgba(56, 161, 105, 0.2); color: #9ae6b4; }
.finding-content { flex: 1; }
.finding-title { color: #e2e8f0; font-weight: 500; margin-bottom: 4px; }
.finding-rec { color: #718096; font-size: 0.85rem; }
.plugin-list, .header-list { display: flex; flex-wrap: wrap; gap: 10px; }
.plugin-tag { background: #2d3748; color: #e2e8f0; padding: 6px 14px; border-radius: 6px; font-size: 0.85rem; }
.plugin-version { color: #718096; font-size: 0.8rem; margin-left: 6px; }
.header-present { background: rgba(56, 161, 105, 0.2); color: #9ae6b4; padding: 6px 14px; border-radius: 6px; font-size: 0.85rem; }
.header-missing { background: rgba(197, 48, 48, 0.2); color: #fc8181; padding: 6px 14px; border-radius: 6px; font-size: 0.85rem; }
.stack-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.stack-item { background: #0d1117; padding: 15px; border-radius: 8px; }
.stack-label { color: #718096; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 5px; }
.stack-value { color: #e2e8f0; font-weight: 500; }
.wsr-scan-error {
margin-top: 30px; background: rgba(197, 48, 48, 0.1); border: 1px solid #c53030;
border-radius: 12px; padding: 20px; color: #fc8181; text-align: center;
}
.cta-section {
margin-top: 30px; padding: 25px; background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
border-radius: 12px; text-align: center;
}
.cta-section h4 { color: #E8E6E1; margin: 0 0 10px; font-size: 1.2rem; }
.cta-section p { color: rgba(255,255,255,0.9); margin: 0 0 15px; }
.cta-button {
display: inline-block; padding: 12px 28px; background: #fff; color: #c53030;
text-decoration: none; border-radius: 8px; font-weight: 600; transition: transform 0.2s;
}
.cta-button:hover { transform: translateY(-2px); }
@media (max-width: 600px) {
.wsr-input-group { flex-direction: column; }
.wsr-scan-form-wrap { padding: 30px 20px; }
.result-header { flex-direction: column; align-items: flex-start; }
}
.risk-error { background: #718096; color: #E8E6E1; }
.risk-info { background: #4299e1; color: #E8E6E1; }
.info-box { padding: 25px; border-radius: 10px; text-align: center; }
.info-box h4 { margin: 0 0 12px; font-size: 1.2rem; border: none; padding: 0; }
.info-box p { margin: 0; font-size: 1rem; line-height: 1.6; }
.error-box { background: rgba(113, 128, 150, 0.15); border: 1px solid #718096; }
.error-box h4 { color: #a0aec0; }
.error-box p { color: #718096; }
.info-box-blue { background: rgba(66, 153, 225, 0.15); border: 1px solid #4299e1; }
.info-box-blue h4 { color: #90cdf4; }
.info-box-blue p { color: #63b3ed; }
.cta-info { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); }
.cta-info .cta-button { color: #3182ce; }
/* wsr-mobilefix-20260902 =====================================================
Appended at the END of overrides.css on purpose.
ROOT CAUSE: overrides.css declares its DESKTOP rules AFTER its own
@media mobile rules. Same selector, same specificity, both !important —
so source order wins and every mobile rule in this file was dead.
Measured live at 390px before this block:
h2/.elementor-heading-title -> 60.8px (3.8rem desktop rule winning
over its own 2.2rem @768 rule)
.wsr-trust-strip -> max-width:82% + margin-left:calc(5% - 45px)
= 320px wide at x[-25..294]: clipped off
the LEFT edge ("redentials", "me-Day")
.wsr-testimonials-wrap -> 50% of that broken 320px = a 145px column
These values are NOT invented — they restore what the child theme and
overrides.css already declare for mobile. This block only re-asserts them
last so they actually apply.
Marked block: delete from the "wsr-mobilefix-20260902" comment to the end
marker to revert. Backup: overrides.css.bak-20260902-mobilefix
========================================================================== */
@media screen and (max-width: 768px) {
/* restore overrides.css's own @768 heading size (was losing to 3.8rem) */
h2,
.elementor-heading-title,
h2.elementor-heading-title { font-size: 2.2rem !important; }
/* restore the child theme's @768 trust-strip geometry.
margin-left ONLY — the base rule's negative margin-top is the intended
pull-up under the hero and must survive. */
.wsr-trust-strip {
max-width: 92% !important;
margin-left: 4% !important;
padding: 40px 0 30px !important;
}
/* 50% is a desktop two-up; on mobile the quote must use the full column */
.wsr-testimonials-wrap { max-width: 100% !important; }
/* back-to-top (bottom:30px, z:9999) sat on top of the Scan-my-site CTA
(bottom:16px, height:57px, z:9998) and covered its label. Lift it clear. */
.wsr-back-to-top { bottom: 88px !important; }
}
@media screen and (max-width: 480px) {
.wsr-trust-strip {
max-width: 95% !important;
margin-left: 2.5% !important;
padding: 30px 0 20px !important;
}
.wsr-testimonials-wrap { max-width: 100% !important; }
}
/* end wsr-mobilefix-20260902 ============================================== */
/* wsr-sharedfix-20260902 ====================================================
PREPARED, NOT YET APPLIED. Append to the END of
wp-content/mu-plugins/wsr-custom/assets/overrides.css (enqueue pos 24 — the
last-loading sheet) only AFTER all 14 page agents have reported, so it does
not change what they are measuring mid-run.
Every fix below was found independently by page agents that were forbidden
from touching shared files. Each already has a page-scoped workaround on the
page that found it; this block generalises those to the remaining pages.
⚠️ ELEMENT-ID SAFETY: Elementor element IDs are REUSED across WSR pages
(47b5a57, de83d17, 8617536, 678054f appear on /pricing AND 1389/2910/2832/1234).
Nothing in this block targets an element ID. Do not add one unscoped.
Backup before appending:
cp overrides.css overrides.css.bak-20260902-sharedfix
Revert = delete from this banner to the end marker.
========================================================================== */
/* --- 1. THE STACKED-TAB BUG (Dave's #1 complaint) -------------------------
Elementor's nested-tabs widget ALREADY ships the correct mobile pattern:
below its breakpoint it sets --n-tabs-heading-display:contents, which
dissolves the heading wrapper so each tab button interleaves with its own
panel (header, panel, next header). A single line in the mobile media query
of BOTH overrides.css and hello-theme-child-master/style.css defeats it:
.red-tabs .e-n-tabs-heading { display:flex !important; gap:0 !important }
That is what stacked all five buttons at the top and forced the user to
scroll back up to reach the next tab.
Re-declare using Elementor's own VARIABLE, not a hardcoded value: above the
breakpoint the variable evaluates to flex, so desktop reverts automatically.
⛔ Hardcoding `contents` breaks the 1024 tab strip — verified on /overwatch. */
.red-tabs .e-n-tabs-heading {
display: var(--n-tabs-heading-display, flex) !important;
}
/* --- 2. `.year-broch` BADGE LANDS ON THE CLOSING HEADLINE -----------------
Confirmed independently on /deep-audit, /pricing, /threats and /about.
The existing mobile rule centres the badge but leaves it position:absolute
at top:-61px — so centring is exactly what drops it onto the closing CTA
headline. It also sits 2-3px past the viewport at 581-1279 via right:-18px. */
@media screen and (max-width: 767px) {
.year-broch {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
transform: none !important;
width: 120px !important;
margin: 0 auto 16px !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
.year-broch { right: 0 !important; }
}
/* --- 3. BACK-TO-TOP SITS INSIDE THE "SCAN MY SITE" PILL -------------------
My wsr-mobilefix-20260902 block lifted this only at <=768. Measured on
/threats, /case-studies, /about, /overwatch and the legal pages: at >=834
the back-to-top (y826-870) sits ENTIRELY INSIDE the pill (y810-876) and
covers its label — the same collision Dave photographed, at a different
breakpoint. Extend the lift to >=769. */
@media screen and (min-width: 769px) {
.wsr-back-to-top { bottom: 104px !important; }
}
/* --- 4. THE 200px SIDEWAYS LATCH -----------------------------------------
`.wsr-glow-host::before` is width:200px at left:100%, so
body.scrollWidth == viewport + 200 on every page that renders the glow host.
With body{overflow-x:hidden} the body becomes a scroll container with 200px
of travel and NO scrollbar to undo it — the left edge of every section is
silently unreachable. Measured latching at a full 200px on /threats,
/case-studies, /about and /overwatch (4-6px on /pricing).
⛔ overflow-x:clip ALONE IS NOT ENOUGH — paired with an existing
overflow-y:hidden it computes back to `hidden` and the latch returns.
overflow-y:visible is ALSO what wsr-imgsticky requires in order to stick.
Verified both variants on /threats.
Test it by FORCING it: document.body.scrollLeft = 500, then read back.
A passive read returns 0 and hides the bug entirely. */
@media screen and (max-width: 768px) {
body { overflow-x: clip !important; overflow-y: visible !important; }
}
/* ═══ 5. ⛔ REQUIRES AN *EDIT*, NOT AN APPEND — CANNOT BE FIXED FROM HERE ═══
overrides.css declares, with NO media query:
h2, .elementor-heading-title, h2.elementor-heading-title
{ font-size: 3.8rem !important }
`.elementor-heading-title` matches EVERY Elementor heading widget whatever the
tag — h3, h4, h5 included. Because it carries !important it outranks Elementor's
own per-widget rules (specificity 0,3,0 but unflagged). So from 768px UP, every
heading widget on every page renders 60.8px instead of its authored size.
Measured on /home: "Monitoring" ran 63px past the right edge at 834; at 1280
"Persistence & Res…" ran off its card AND off the screen; numbered badges became
squashed ovals with the digits bursting out of the ring.
⚠️ MY EARLIER wsr-mobilefix-20260902 BLOCK ONLY RESTORED 2.2rem AT <=768/<=480.
The bug is still live at >=769 on every page. That block was an incomplete fix.
⛔ WHY THIS CANNOT BE APPENDED: to restore per-widget sizes you would have to beat
an !important with another !important, and the authored size differs per widget —
there is no generic value to write. The only correct fix is to EDIT the existing
declaration:
- drop `.elementor-heading-title` from the selector list (leave bare `h2`), or
- remove the `!important`, or
- give it a max-width media query so it stops applying below the design width.
⚠️ That is a sitewide typography change in a 132KB shared file. Apply ONLY with:
1. a fresh overrides.css backup,
2. before/after heading-size capture on ALL 16 pages at 768/1024/1440/1920,
3. an immediate revert path.
Page-local workarounds already exist on /home (re-asserting the authored sizes).
Every other page still has the bug at >=769.
═══════════════════════════════════════════════════════════════════════════ */
/* --- NOT INCLUDED, deliberately ------------------------------------------
a) `wsr-reveal` IntersectionObserver race — a widget can miss `.in-view` and
stay at opacity:0 (a 694px-tall invisible image on /threats). Reproduced
only under fast synthetic scroll; 0/6 at human speed. This is a shared JS
fix (observer fallback / animationend safety net), not CSS. Do NOT add a
CSS failsafe: it would make that page animate differently from the rest.
b) The floating "Scan my site" pill covering content/footer links at the
bottom of every page. Needs a design decision (reserve bottom padding
sitewide / auto-hide on scroll-down / shrink on mobile) — Dave's call,
not a bug fix.
c) Main nav wrapping to 3 rows at 1280 and 1440 (needs ~1471px). Pre-existing
and Dave's call on how to solve.
d) The `contain-intrinsic-size: 3000px 1500px` placeholder stretch. It only
bites images in hidden containers whose object-fit:cover was removed, so
it is page-specific — and a blanket rule here risks the bare
`aspect-ratio:auto` foot-gun that pins everything to 1500px.
========================================================================== */
/* end wsr-sharedfix-20260902 ============================================== */
/* =========================================================================
wsr-ghostblob-20260904 — opus5, 2026-09-04, Dave walkthrough page 1
Appended to mu-plugins/wsr-custom/assets/overrides.css (loads LAST).
TWO DEFECTS FIXED, both on the homepage "The Victim's Anti Virus?" block
(section .wsr-attack-section / elementor-element-20a390b):
1. THE BLOB. §7 glowed the ghost with three stacked filter:drop-shadow()
in pure rgb(255,0,0). drop-shadow traces the PNG's ALPHA SILHOUETTE, so
it rendered as a hard neon ring hugging the ghost outline, leaving the
near-black ghost artwork as a dark hole in the middle — Dave: "a blob of
red with a black circle in the center". Pure #f00 is also off-brand
(WSR red is #db3c1a / rgba(220,15,18) / rgba(255,59,29)).
Per the css-glow-effects skill: box-shadow is THE mechanism for ambient
glows on dark backgrounds — small element + large shadow, background
transparent so no hard edge is ever visible.
2. THE BORDERS. §15 line ~2658:
.wsr-attack-section .e-con:has(img):hover,
.wsr-attack-section .elementor-element:has(img):hover
:has(img) matches EVERY ANCESTOR that contains an image, not the
innermost one. Hovering the ghost fired FOUR nested boxes at once —
8b460bc (72x45), f542474 (578x108), 9aecb02 (608x361), ca4c0fc
(1296x376) — each with a 1px red ring, a 60px + 120px red glow, AND a
scale(1.025) translateY(-6px). Verified live by hovering with this
block disabled (negative control) then enabled.
3. FOUND WHILE VERIFYING — DEAD RULE. §7's
.elementor-element-800741f:hover .elementor-widget-container
targets an element that DOES NOT EXIST in this widget: the ![]()
is a
direct child of .elementor-element-800741f. That rule has never fired.
The "ghost grows" behaviour Dave has been seeing was the :has(img)
scale(1.025) from defect 2 — i.e. killing the borders also killed the
grow. The scale is therefore re-homed onto the ![]()
itself here.
VERIFIED (live, 1440x1000, hover on .elementor-element-800741f img):
before — f542474/9aecb02/ca4c0fc/800741f all show the red ring +
matrix(1.025,0,0,1.025,0,-6)
after — all four report box-shadow:none, transform:none;
ghost img matrix(1.18,...), blob ::before matrix(1.5,...)
========================================================================= */
/* --- 1. THE BLOB — skill-compliant ambient glow behind the ghost --------- */
.elementor-element-800741f {
position: relative !important;
overflow: visible !important;
}
.elementor-element-800741f::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 52% !important;
width: 40px !important;
height: 40px !important;
margin: -20px 0 0 -20px !important;
border-radius: 50% !important;
background: transparent !important; /* no fill => no hard edge, ever */
pointer-events: none !important;
z-index: 1 !important;
box-shadow:
0 0 70px 40px rgba(255, 59, 29, 0.42),
0 0 130px 75px rgba(219, 60, 26, 0.28),
0 0 200px 110px rgba(220, 15, 18, 0.15) !important;
animation: wsr-ghost-blob 2.5s ease-in-out infinite !important;
transition: transform 0.45s ease, box-shadow 0.45s ease !important;
}
@keyframes wsr-ghost-blob {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.18); opacity: 1; }
}
/* Ghost sits ON the blob. The old triple #f00 drop-shadow ring is replaced by
a single tight WSR-red shadow, purely for edge separation. */
.elementor-element-800741f img {
filter: drop-shadow(0 0 6px rgba(255, 59, 29, 0.55)) !important;
animation: none !important;
position: relative !important;
z-index: 2 !important;
transition: transform 0.45s ease, filter 0.45s ease !important;
}
/* --- Hover: ONLY the ghost and the red behind it grow. Dave's words. ----- */
.elementor-element-800741f:hover img {
transform: scale(1.18) !important;
filter: drop-shadow(0 0 10px rgba(255, 59, 29, 0.75)) !important;
}
.elementor-element-800741f:hover::before {
transform: scale(1.5) !important;
box-shadow:
0 0 90px 55px rgba(255, 59, 29, 0.55),
0 0 170px 100px rgba(219, 60, 26, 0.36),
0 0 250px 140px rgba(220, 15, 18, 0.20) !important;
}
/* --- 2. THE BORDERS — stop every ancestor lighting up ------------------- */
/* Deliberately a blanket neutraliser inside .wsr-attack-section rather than an
:not(:has(...)) innermost-only filter: there is no real card in this section
that wants the ring, and Dave's instruction was "the other red glowing
borders need removing". A future card gets it back via an explicit class. */
.wsr-attack-section .e-con:has(img):hover,
.wsr-attack-section .elementor-element:has(img):hover {
transform: none !important;
box-shadow: none !important;
}
/* =========================================================================
wsr-glowhole-20260907 — opus5, 2026-09-07, Dave walkthrough page 1
Appended to mu-plugins/wsr-custom/assets/overrides.css (loads LAST).
Worklist items 2 and 4.
⛔ THE DEFECT CLASS: box-shadow is NOT painted beneath its own element's
border-box. A round element with `background: transparent` + a large
box-shadow therefore renders a RING, not a disc — there is a hole the exact
size of the element where the page background shows through.
Three glows on this page were built that way, all "small element + large
shadow" per the css-glow-effects skill, all with a transparent background:
.elementor-element-800741f::before 40px (ghost) — MINE, 09-04
.wsr-attack-section::before 900px (left wash)
.wsr-attack-section::after 700px (behind the monitor image)
Dave saw both surviving symptoms at 4K:
item 4 — "the ghost has a glitch when it gets bigger, there is a moment
when he has a dark circle behind him ... seems to come from the
red glow getting bigger". At rest the 82px ghost covers the 40px
hole. On hover the pseudo scales 1.5 (60px hole) while the ghost
scales only 1.18, and the ghost is a SHAPE not a disc — so the
hole outgrows its cover and shows around the silhouette.
item 2 — "the black circle in the middle of the blob behind the image
needs to be all red like all the others". That is the 700px
::after hole sitting behind the CAPTCHA/monitor image.
VERIFIED, not assumed: rendered the ghost glow with the ![]()
set to
visibility:hidden and the pseudo pinned at scale(1.5). A solid dark disc is
plainly visible dead centre of the red glow. Screenshot:
scratchpad/hole-ba.png (before | after).
FIX: give each disc a radial-gradient fill matched to the inner intensity of
its own box-shadow, so the core is continuous with the glow around it.
Alpha values are chosen to sit just above each shadow's innermost layer.
========================================================================= */
.elementor-element-800741f::before {
background: radial-gradient(circle,
rgba(255, 59, 29, 0.50) 0%,
rgba(255, 59, 29, 0.46) 60%,
rgba(255, 59, 29, 0.42) 100%) !important;
}
.wsr-attack-section::before {
background: radial-gradient(circle,
rgba(218, 24, 27, 0.26) 0%,
rgba(218, 24, 27, 0.25) 70%,
rgba(218, 24, 27, 0.24) 100%) !important;
}
.wsr-attack-section::after {
background: radial-gradient(circle,
rgba(218, 24, 27, 0.21) 0%,
rgba(218, 24, 27, 0.20) 70%,
rgba(218, 24, 27, 0.19) 100%) !important;
}
/* =========================================================================
wsr-greenfix-20260907 — opus5, 2026-09-07, Dave walkthrough page 1
Worklist items 9 and 10.
THE SITE HAS TWO GREENS. Counted live on the homepage:
rgb(153, 252, 46) — the bright lime. 70 uses. THIS IS OURS.
rgb(2, 208, 90) — a duller emerald. 5 text uses, all wrong, + the chips.
Dave, item 9 (3-STEP PLAN): "those circled bits are not our green change it
to the nicer green as the other green text is."
Dave, item 10 (LEGAL REALITY): "its all the wrong green again."
HOW EACH IS SET (checked, not guessed):
- the green spans carry INLINE style="color: #02D05A" -> needs !important
to beat an inline declaration.
- the number chips are class `.green-num-box`, already declared
!important in BOTH child-theme style.css AND overrides.css. Equal
specificity + !important means source order decides, and overrides.css
loads last — but this block is appended to overrides.css itself, so it
needs to beat an earlier rule in the SAME file. `body .green-num-box`
(0,1,1) outranks the bare `.green-num-box` (0,1,0) unconditionally
rather than relying on append order.
⛔ NOT A GLOBAL SWAP. rgb(2,208,90) is ALSO the page-wash colour in §1
(body.page-id-2558 / 2910 / 1389 / 3973 ::before at 0.55 / 0.35 / 0.15).
A sitewide find-replace would repaint the About / Pricing / Certificate /
Overwatch hero washes. Scoped deliberately.
VERIFIED live before shipping: wrong-green text spans on the homepage
5 -> 0; all three chips read rgba(153,252,46,0.1).
========================================================================= */
/* --- items 9b + 10: every inline #02D05A span in the two sections -------- */
.elementor-element-0112482 span[style*="02D05A"],
.elementor-element-0112482 span[style*="02d05a"],
.elementor-element-1b79be3 span[style*="02D05A"],
.elementor-element-1b79be3 span[style*="02d05a"] {
color: rgb(153, 252, 46) !important;
}
/* --- item 9: the numbered chips, via their real class ------------------- */
body .green-num-box,
body .green-num-box .elementor-widget-container {
background-color: rgba(153, 252, 46, 0.10) !important;
}
/* =========================================================================
wsr-glowshrink-20260907 — opus5, 2026-09-07
SUPERSEDES the radial-gradient fills in wsr-glowhole-20260907 (same file,
earlier block). Those fills are neutralised here with `background: none`.
⛔ WHY THE FIRST FIX WAS WRONG.
The defect was real — box-shadow is never painted beneath its own element's
border-box, so a round element with a transparent background renders a RING
with a hole. I patched it by FILLING the hole with a radial-gradient. Dave,
within the hour: "you can see a different colour red now."
He was right. Each of these glows stacks TWO OR THREE shadow layers in
different reds (rgba(218,24,27) + rgba(255,59,29) + rgba(220,15,18)) which
blend where they overlap. A single flat-hue fill cannot match that blend, so
the filled core read as a separate disc of the wrong red. I had painted over
the symptom in a colour that made it more visible, not less.
⛔ THE ACTUAL CAUSE: these were never built to the skill. css-glow-effects
says SMALL element + LARGE shadow, with the element hidden so only the soft
shadow shows. `.wsr-attack-section::after` is a 700px element sitting fully
ON SCREEN — its hole is 700px wide. `.elementor-element-800741f::before` was
40px (mine, 09-04). Shrink the element and the hole ceases to exist; nothing
needs filling and no hue can mismatch.
GEOMETRY — WHY SHRINKING MOVES NOTHING (checked, not assumed):
with `right: R` + `translateX(50%)` the element's centre lands at
(containerW - R) because the translate cancels exactly half the width — so
the centre is INDEPENDENT of the width. Same for `top: T` + translateY(-50%).
Radius removed from the box is added back to every spread, so the rendered
glow keeps its extent:
::after 700px -> 60px (radius -320) spreads 300->620, 150->470
ghost 40px -> 10px (radius -15) spreads 40->55, 75->90, 110->125
hover: spreads 55->70, 100->115, 140->155
`.wsr-attack-section::before` needs NO shrink — it sits at left:-900px, fully
off-screen, which is the skill's own "hide the element" pattern. Its hole was
never visible. My fill on it was pointless; removed.
VERIFIED: pixel-diffed the two full 3840x2160 renders. The only differences
are antialiasing on text and image edges — no region of changed glow. The
pseudo-element was also temporarily outlined to confirm its true position
rather than trusting the calc().
========================================================================= */
.wsr-attack-section::before {
background: none !important;
}
.wsr-attack-section::after {
width: 60px !important;
height: 60px !important;
background: none !important;
box-shadow:
0 0 400px 620px rgba(218, 24, 27, 0.20),
0 0 200px 470px rgba(255, 59, 29, 0.15) !important;
}
.elementor-element-800741f::before {
width: 10px !important;
height: 10px !important;
margin: -5px 0 0 -5px !important;
background: none !important;
box-shadow:
0 0 70px 55px rgba(255, 59, 29, 0.42),
0 0 130px 90px rgba(219, 60, 26, 0.28),
0 0 200px 125px rgba(220, 15, 18, 0.15) !important;
}
.elementor-element-800741f:hover::before {
box-shadow:
0 0 90px 70px rgba(255, 59, 29, 0.55),
0 0 170px 115px rgba(219, 60, 26, 0.36),
0 0 250px 155px rgba(220, 15, 18, 0.20) !important;
}
/* =========================================================================
wsr-glowmove-20260907 — opus5, 2026-09-07
Dave: "move it down 30px too" — the red blob behind the CAPTCHA/monitor
image on THE ATTACK, i.e. .wsr-attack-section::after.
The element uses `top: T` + `translateY(-50%)`, so its CENTRE lands exactly
at T (the translate cancels half the height). Moving T by +30px therefore
moves the glow centre by exactly 30px, independent of the element's size.
calc(50% - 100px) -> calc(50% - 70px).
Verified live: computed top 724.312px -> 754.312px. Delta exactly 30.
========================================================================= */
.wsr-attack-section::after {
top: calc(50% - 70px) !important;
}
/* =========================================================================
wsr-homebatch-20260907 — opus5, 2026-09-07
Dave's walkthrough items 3, 5, 8, 11, 12 in one block.
========================================================================= */
/* --- items 11 + 12: the two certificate sections -------------------------
MEASURED ON HOVER (at rest there is nothing wrong, which is why a rest-state
probe found no defect):
1. ancestor grid .elementor-element-6885ae5 picks up rgba(153,252,46) —
a GREEN glow on the "Without Certification" section — plus
scale(1.025) translateY(-6px). Same `:has(img):hover` rule already
neutralised in .wsr-attack-section on 09-04.
2. .wsr-legal-nocert-frame keeps its own 2px red border. That one is
wanted — it is the ONE border Dave asked to keep.
3. the ![]()
scales 1.1 and escapes its wrapper by 87px right / 74px
bottom — item 12, "make the image not go outside of its frame".
Dave item 11: "we just want one border and one glow please not 3".
So: kill the ancestor glow + lift, clip the image to the frame's rounded
box, and put ONE glow on the frame itself in ITS OWN colour. ---------- */
.elementor-element-85aa7c8 .e-con:has(img):hover,
.elementor-element-85aa7c8 .elementor-element:has(img):hover,
.elementor-element-10d65e6 .e-con:has(img):hover,
.elementor-element-10d65e6 .elementor-element:has(img):hover {
transform: none !important;
box-shadow: none !important;
}
/* contain the 1.1 image scale inside the rounded frame */
.wsr-legal-nocert-frame,
.wsr-legal-withcert-frame {
overflow: hidden !important;
transition: box-shadow 0.45s ease !important;
}
/* ONE glow, on the frame, matching the frame's own colour */
.wsr-legal-nocert-frame:hover {
box-shadow: 0 0 60px rgba(255, 59, 29, 0.40),
0 0 120px rgba(218, 24, 27, 0.22) !important;
}
.wsr-legal-withcert-frame:hover {
box-shadow: 0 0 60px rgba(153, 252, 46, 0.40),
0 0 120px rgba(153, 252, 46, 0.22) !important;
}
/* --- item 5: TOO SMALL — text must never leave its box -------------------
Not reproducible at 3840 (the tabs have 249px of slack there), so this is a
containment guard rather than a targeted fix: whatever width it happens at,
the title wraps instead of spilling. ---------------------------------- */
.elementor-element-7018454 .e-n-tab-title {
white-space: normal !important;
overflow-wrap: anywhere !important;
min-width: 0 !important;
}
.elementor-element-7018454 .e-n-tab-title > * {
max-width: 100% !important;
min-width: 0 !important;
}
/* --- item 8: REALLY AFTER — bigger top and bottom paragraphs -------------
The intro and the closing StilachiRAT paragraph sat at 16px, the same size
as the three cards between them, so the section had no lead-in or pay-off.
They are the first and last of the section. ----------------------- */
.elementor-element-f4ac3a8 > .e-con-inner > .elementor-element:first-of-type p,
.elementor-element-f4ac3a8 > .e-con-inner > .elementor-element:last-of-type p {
font-size: 1.35rem !important;
line-height: 1.5 !important;
}
/* --- item 3: body copy is too small on a 4K screen -----------------------
At 3840 the headings are 60.8px while body copy stays 19.2px (THE ATTACK)
and 16px (REALLY AFTER) — set for a 1920 canvas and never revisited, because
the 09-03 responsive pass topped out at 1920. Scale the copy up above
2560px so it holds its proportion against the headings. --------------- */
@media (min-width: 2560px) {
.elementor-1947 p,
.elementor-1947 .elementor-widget-text-editor,
.elementor-1947 .elementor-widget-text-editor p {
font-size: 1.75rem !important;
line-height: 1.55 !important;
}
.elementor-element-f4ac3a8 > .e-con-inner > .elementor-element:first-of-type p,
.elementor-element-f4ac3a8 > .e-con-inner > .elementor-element:last-of-type p {
font-size: 2.1rem !important;
}
.elementor-1947 .e-n-tab-title {
font-size: 1.6rem !important;
}
}
/* =========================================================================
wsr-homebatch2-20260907 — opus5, 2026-09-07
CORRECTS two mistakes in wsr-homebatch-20260907 (same file, earlier block).
Both were caught by verifying the deploy, not by reading the CSS.
MISTAKE 1 — I targeted the wrong element for item 12.
`.wsr-legal-nocert-frame` is NOT the image's frame. Checked with
frame.contains(img) -> FALSE. It is a 3542x1507 decorative border overlay
that is a SIBLING of the image column. So `overflow:hidden` on it clipped
nothing, and `.wsr-legal-nocert-frame:hover` never fires from hovering the
image because the image is not inside it.
The image's real wrapper is the image-hover-effect widget:
nocert .elementor-element-af6f412
withcert .elementor-element-468edf4
Both already carry border-radius 20px but overflow:visible, so the
`elementor-animation-grow` scale(1.1) spills out — Dave item 12, "make the
image not go outside of its frame".
MISTAKE 2 — item 8's first paragraph never took.
`:first-of-type` matched an absolutely-positioned decorative div, not the
intro copy. The real children are:
.elementor-element-53aa396 intro ("Forget the old 'hackers want...")
.elementor-element-ab4c84d close ("This isn't hypothetical. Microsoft...")
Measured after the first deploy: last = 33.6px, first = 28px (unchanged).
========================================================================= */
/* --- item 12: clip the 1.1 grow to the image's own rounded box ---------- */
.elementor-element-af6f412,
.elementor-element-468edf4 {
overflow: hidden !important;
border-radius: 20px !important;
transition: box-shadow 0.45s ease !important;
}
/* --- item 11: ONE glow, on that same rounded box, in its own colour ----- */
.elementor-element-af6f412:hover {
box-shadow: 0 0 60px rgba(255, 59, 29, 0.40),
0 0 120px rgba(218, 24, 27, 0.22) !important;
}
.elementor-element-468edf4:hover {
box-shadow: 0 0 60px rgba(153, 252, 46, 0.40),
0 0 120px rgba(153, 252, 46, 0.22) !important;
}
/* the earlier block's neutraliser must not eat the glow above */
.elementor-element-85aa7c8 .e-con:has(img):hover,
.elementor-element-85aa7c8 .elementor-element:has(img):hover,
.elementor-element-10d65e6 .e-con:has(img):hover,
.elementor-element-10d65e6 .elementor-element:has(img):hover {
transform: none !important;
}
.elementor-element-af6f412:hover,
.elementor-element-468edf4:hover {
transform: none !important;
}
/* --- item 8: the ACTUAL first and last paragraphs ----------------------- */
.elementor-element-53aa396 p,
.elementor-element-ab4c84d p {
font-size: 1.35rem !important;
line-height: 1.5 !important;
}
@media (min-width: 2560px) {
.elementor-element-53aa396 p,
.elementor-element-ab4c84d p {
font-size: 2.1rem !important;
}
}
/* =========================================================================
wsr-textclamp-20260907 — opus5, 2026-09-07
Dave: "lower the percentage or clamp ... at this size the text beside images
needs to be between the original size and the size it is now, it needs to be
smaller."
wsr-homebatch-20260907 jumped body copy 19.2px -> 28px at a hard
min-width:2560px breakpoint. Two problems: 28px overshot, and a hard
breakpoint snaps rather than scales.
Replaced with clamp() so the size grows continuously with the viewport and
stops at a ceiling:
body copy 19.2px at <=1920 -> 23.5px at 3840 (was 28px)
RA top/btm 21.6px at <=1920 -> 26px at 3840 (was 33.6px)
tab titles 19.2px at <=1920 -> 23.5px at 3840
Maths for the body line: size = a + b*vw, solved for 19.2px at 1920 and
23.5px at 3840 -> b = 0.224vw, a = 14.9px. The clamp floor holds every
viewport at or below 1920 at exactly the size it has today, so nothing
below 4K moves.
========================================================================= */
@media (min-width: 2560px) {
.elementor-1947 p,
.elementor-1947 .elementor-widget-text-editor,
.elementor-1947 .elementor-widget-text-editor p {
font-size: clamp(19.2px, 14.9px + 0.224vw, 23.5px) !important;
line-height: 1.55 !important;
}
.elementor-1947 .e-n-tab-title {
font-size: clamp(19.2px, 14.9px + 0.224vw, 23.5px) !important;
}
.elementor-element-53aa396 p,
.elementor-element-ab4c84d p {
font-size: clamp(21.6px, 17.2px + 0.229vw, 26px) !important;
}
}
/* =========================================================================
wsr-specificity-20260907 — opus5, 2026-09-07
Two rules from the earlier blocks computed but never won. Both were losing
on SPECIFICITY, not on source order — appending later does nothing when the
competing selector is stronger.
1. IMAGE CONTAINMENT (item 12). Elementor emits an INLINE rule
body.elementor-page-1947 [class*="-img-content"]
.elementor-widget-image:not(.he...) { overflow: visible !important }
inside @media (min-width:769px). That is (0,4,1). My
`.elementor-element-af6f412` was (0,1,0) — !important on both, so the
stronger selector wins and the image kept spilling on hover.
NOTE that inline rule is deliberate (the `-img-content` absolute/cover
pattern from WSR-SITE-TO-FINISHED-2026-08-27) — it is only overridden
here for these two specific image widgets, not weakened globally.
2. RA TOP/BOTTOM PARAGRAPHS (item 8). The generic block includes
`.elementor-1947 .elementor-widget-text-editor p` = (0,2,1)
which outranks `.elementor-element-53aa396 p` = (0,1,1), so the intro
paragraph kept the generic body size instead of the larger one.
Measured before this block, at 3840:
af6f412 overflow = visible (wanted hidden)
53aa396 p = 23.5px (wanted 26px)
ab4c84d p = 33.6px (wanted 26px)
========================================================================= */
body.elementor-page-1947 .elementor-element.elementor-element-af6f412.image-hover-effect.elementor-widget-image,
body.elementor-page-1947 .elementor-element.elementor-element-468edf4.image-hover-effect.elementor-widget-image {
overflow: hidden !important;
border-radius: 20px !important;
}
@media (min-width: 2560px) {
body.elementor-page-1947 .elementor-1947 .elementor-element-53aa396 p,
body.elementor-page-1947 .elementor-1947 .elementor-element-ab4c84d p {
font-size: clamp(21.6px, 17.2px + 0.229vw, 26px) !important;
line-height: 1.5 !important;
}
}
/* =========================================================================
wsr-spec2-20260907 — opus5, 2026-09-07
Last correction in this chain. The closing paragraph of REALLY AFTER stayed
at 33.6px because MY OWN earlier rule outranked my newer one:
wsr-homebatch: .elementor-element-f4ac3a8 > .e-con-inner
> .elementor-element:last-of-type p (0,4,1)
wsr-specificity: body.elementor-page-1947 .elementor-1947
.elementor-element-ab4c84d p (0,3,2)
4 classes beats 3, so the 2.1rem stuck. (That same :last-of-type rule is
also why the CLOSING paragraph was the only one that ever took the original
item-8 bump — :first-of-type matched a decorative absolutely-positioned div,
not the intro copy.) One more class puts this above it.
========================================================================= */
@media (min-width: 2560px) {
body.elementor-page-1947 .elementor-1947 .elementor-element.elementor-element-53aa396 p,
body.elementor-page-1947 .elementor-1947 .elementor-element.elementor-element-ab4c84d p {
font-size: clamp(21.6px, 17.2px + 0.229vw, 26px) !important;
line-height: 1.5 !important;
}
}
/* =========================================================================
wsr-airing-20260907 — opus5, 2026-09-07
Dave walkthrough item 6: "each one of those on mouse over should grow and get
a glow behind it ... then show a box of text explaining the images and how
its attacking the SMB website", and "put invisible pngs in front of them and
put the words up on mouse over".
WHY HOTSPOTS. An SVG only receives :hover on its PAINTED pixels, so
hovering the gaps inside an icon would flicker the tooltip off. A transparent
circle in front is a solid, predictable target — Dave's call, and it is the
correct one. Everything else keys off it with :has(). No JS.
GEOMETRY. Hotspots are positioned as % of the SVG's 1920x1086 viewBox. The
svg is width:100%/height:100% with the default preserveAspectRatio, which
LETTERBOXES if the container aspect differs — that would slide every hotspot
off its icon. .wsr-ai-ring is therefore pinned to aspect-ratio 1920/1086 so
the percentage mapping is exact at every width.
GLOWS — per the css-glow-effects skill:
- box-shadow is the mechanism for ambient glow on a dark background;
radial-gradient washes out and filter:blur() spreads too thin. Used on
the hotspot, which is an HTML element.
- SMALL element + LARGE shadow: the glow source is 8px, not the full
circle, so box-shadow's un-painted core (see
feedback_box_shadow_glows_have_a_hole) is 8px and invisible under the
icon rather than a dark disc.
- SVG cannot take box-shadow at all, so the icon's own lift uses layered
filter: drop-shadow() instead.
- Green is #99FC2E (153,252,46) — the site's real green, not the duller
rgb(2,208,90) corrected elsewhere today.
========================================================================= */
.wsr-ai-ring {
position: relative !important;
aspect-ratio: 1920 / 1086;
}
.wsr-ai-ring > svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* --- the invisible hotspot in front of each icon ----------------------- */
.wsr-ai-hot {
position: absolute;
width: 5.47%; /* 105 / 1920 — the icon circle's diameter */
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background: transparent;
cursor: pointer;
z-index: 3;
}
.wsr-ai-hot:focus-visible {
outline: 3px solid #99FC2E;
outline-offset: 6px;
}
/* the glow BEHIND the icon: 8px source, large spread (skill) */
.wsr-ai-hot::before {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 8px; height: 8px; margin: -4px 0 0 -4px;
border-radius: 50%;
background: radial-gradient(circle, rgba(153,252,46,0.50) 0%, rgba(153,252,46,0.36) 100%);
box-shadow:
0 0 44px 26px rgba(153, 252, 46, 0.28),
0 0 95px 56px rgba(2, 208, 90, 0.18);
opacity: 0;
z-index: -1;
pointer-events: none;
transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.22,.61,.36,1);
}
.wsr-ai-hot:hover::before,
.wsr-ai-hot:focus-visible::before {
opacity: 1;
transform: scale(1.3);
}
/* --- the icon grows (SVG: drop-shadow, never box-shadow) ---------------- */
.wsr-ai-icon {
transform-box: fill-box;
transform-origin: center;
transition: transform 0.45s cubic-bezier(.22,.61,.36,1), filter 0.45s ease;
}
/* --- the explainer box -------------------------------------------------- */
.wsr-ai-tip {
position: absolute;
width: min(340px, 30vw);
margin-top: 3.4%;
padding: 16px 18px;
border-radius: 14px;
background: rgba(18, 18, 18, 0.96);
border: 1px solid rgba(153, 252, 46, 0.45);
box-shadow:
0 0 40px rgba(153, 252, 46, 0.18),
0 18px 50px rgba(0, 0, 0, 0.55);
color: #E8E6E1;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 6;
transform: translate(-50%, 14px) scale(0.96);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.22,.61,.36,1), visibility 0.35s;
}
.wsr-ai-tip strong {
display: block;
color: #99FC2E;
font-size: 1.05rem;
line-height: 1.3;
margin-bottom: 7px;
}
.wsr-ai-tip span {
display: block;
font-size: 0.95rem;
line-height: 1.5;
}
/* keep edge tooltips on screen */
.wsr-ai-tip--left { transform: translate(-8%, 14px) scale(0.96); }
.wsr-ai-tip--right { transform: translate(-92%, 14px) scale(0.96); }
@media (min-width: 2560px) {
.wsr-ai-tip { width: min(520px, 26vw); padding: 22px 26px; }
.wsr-ai-tip strong { font-size: 1.5rem; }
.wsr-ai-tip span { font-size: 1.3rem; }
}
/* --- per-icon grow --- */
.wsr-ai-ring:has(.wsr-ai-hot-1:hover) .wsr-ai-icon-1,
.wsr-ai-ring:has(.wsr-ai-hot-1:focus-visible) .wsr-ai-icon-1 {
transform: scale(1.14);
filter: drop-shadow(0 0 10px rgba(153, 252, 46, 0.85))
drop-shadow(0 0 28px rgba(153, 252, 46, 0.50));
}
.wsr-ai-ring:has(.wsr-ai-hot-2:hover) .wsr-ai-icon-2,
.wsr-ai-ring:has(.wsr-ai-hot-2:focus-visible) .wsr-ai-icon-2 {
transform: scale(1.14);
filter: drop-shadow(0 0 10px rgba(153, 252, 46, 0.85))
drop-shadow(0 0 28px rgba(153, 252, 46, 0.50));
}
.wsr-ai-ring:has(.wsr-ai-hot-3:hover) .wsr-ai-icon-3,
.wsr-ai-ring:has(.wsr-ai-hot-3:focus-visible) .wsr-ai-icon-3 {
transform: scale(1.14);
filter: drop-shadow(0 0 10px rgba(153, 252, 46, 0.85))
drop-shadow(0 0 28px rgba(153, 252, 46, 0.50));
}
.wsr-ai-ring:has(.wsr-ai-hot-4:hover) .wsr-ai-icon-4,
.wsr-ai-ring:has(.wsr-ai-hot-4:focus-visible) .wsr-ai-icon-4 {
transform: scale(1.14);
filter: drop-shadow(0 0 10px rgba(153, 252, 46, 0.85))
drop-shadow(0 0 28px rgba(153, 252, 46, 0.50));
}
.wsr-ai-ring:has(.wsr-ai-hot-5:hover) .wsr-ai-icon-5,
.wsr-ai-ring:has(.wsr-ai-hot-5:focus-visible) .wsr-ai-icon-5 {
transform: scale(1.14);
filter: drop-shadow(0 0 10px rgba(153, 252, 46, 0.85))
drop-shadow(0 0 28px rgba(153, 252, 46, 0.50));
}
.wsr-ai-ring:has(.wsr-ai-hot-6:hover) .wsr-ai-icon-6,
.wsr-ai-ring:has(.wsr-ai-hot-6:focus-visible) .wsr-ai-icon-6 {
transform: scale(1.14);
filter: drop-shadow(0 0 10px rgba(153, 252, 46, 0.85))
drop-shadow(0 0 28px rgba(153, 252, 46, 0.50));
}
.wsr-ai-ring:has(.wsr-ai-hot-7:hover) .wsr-ai-icon-7,
.wsr-ai-ring:has(.wsr-ai-hot-7:focus-visible) .wsr-ai-icon-7 {
transform: scale(1.14);
filter: drop-shadow(0 0 10px rgba(153, 252, 46, 0.85))
drop-shadow(0 0 28px rgba(153, 252, 46, 0.50));
}
.wsr-ai-ring:has(.wsr-ai-hot-8:hover) .wsr-ai-icon-8,
.wsr-ai-ring:has(.wsr-ai-hot-8:focus-visible) .wsr-ai-icon-8 {
transform: scale(1.14);
filter: drop-shadow(0 0 10px rgba(153, 252, 46, 0.85))
drop-shadow(0 0 28px rgba(153, 252, 46, 0.50));
}
/* --- per-icon explainer reveal --- */
.wsr-ai-ring:has(.wsr-ai-hot-1:hover) .wsr-ai-tip-1,
.wsr-ai-ring:has(.wsr-ai-hot-1:focus-visible) .wsr-ai-tip-1 {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-1:hover) .wsr-ai-tip-1.wsr-ai-tip--left,
.wsr-ai-ring:has(.wsr-ai-hot-1:focus-visible) .wsr-ai-tip-1.wsr-ai-tip--left {
transform: translate(-8%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-1:hover) .wsr-ai-tip-1.wsr-ai-tip--right,
.wsr-ai-ring:has(.wsr-ai-hot-1:focus-visible) .wsr-ai-tip-1.wsr-ai-tip--right {
transform: translate(-92%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-2:hover) .wsr-ai-tip-2,
.wsr-ai-ring:has(.wsr-ai-hot-2:focus-visible) .wsr-ai-tip-2 {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-2:hover) .wsr-ai-tip-2.wsr-ai-tip--left,
.wsr-ai-ring:has(.wsr-ai-hot-2:focus-visible) .wsr-ai-tip-2.wsr-ai-tip--left {
transform: translate(-8%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-2:hover) .wsr-ai-tip-2.wsr-ai-tip--right,
.wsr-ai-ring:has(.wsr-ai-hot-2:focus-visible) .wsr-ai-tip-2.wsr-ai-tip--right {
transform: translate(-92%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-3:hover) .wsr-ai-tip-3,
.wsr-ai-ring:has(.wsr-ai-hot-3:focus-visible) .wsr-ai-tip-3 {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-3:hover) .wsr-ai-tip-3.wsr-ai-tip--left,
.wsr-ai-ring:has(.wsr-ai-hot-3:focus-visible) .wsr-ai-tip-3.wsr-ai-tip--left {
transform: translate(-8%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-3:hover) .wsr-ai-tip-3.wsr-ai-tip--right,
.wsr-ai-ring:has(.wsr-ai-hot-3:focus-visible) .wsr-ai-tip-3.wsr-ai-tip--right {
transform: translate(-92%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-4:hover) .wsr-ai-tip-4,
.wsr-ai-ring:has(.wsr-ai-hot-4:focus-visible) .wsr-ai-tip-4 {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-4:hover) .wsr-ai-tip-4.wsr-ai-tip--left,
.wsr-ai-ring:has(.wsr-ai-hot-4:focus-visible) .wsr-ai-tip-4.wsr-ai-tip--left {
transform: translate(-8%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-4:hover) .wsr-ai-tip-4.wsr-ai-tip--right,
.wsr-ai-ring:has(.wsr-ai-hot-4:focus-visible) .wsr-ai-tip-4.wsr-ai-tip--right {
transform: translate(-92%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-5:hover) .wsr-ai-tip-5,
.wsr-ai-ring:has(.wsr-ai-hot-5:focus-visible) .wsr-ai-tip-5 {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-5:hover) .wsr-ai-tip-5.wsr-ai-tip--left,
.wsr-ai-ring:has(.wsr-ai-hot-5:focus-visible) .wsr-ai-tip-5.wsr-ai-tip--left {
transform: translate(-8%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-5:hover) .wsr-ai-tip-5.wsr-ai-tip--right,
.wsr-ai-ring:has(.wsr-ai-hot-5:focus-visible) .wsr-ai-tip-5.wsr-ai-tip--right {
transform: translate(-92%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-6:hover) .wsr-ai-tip-6,
.wsr-ai-ring:has(.wsr-ai-hot-6:focus-visible) .wsr-ai-tip-6 {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-6:hover) .wsr-ai-tip-6.wsr-ai-tip--left,
.wsr-ai-ring:has(.wsr-ai-hot-6:focus-visible) .wsr-ai-tip-6.wsr-ai-tip--left {
transform: translate(-8%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-6:hover) .wsr-ai-tip-6.wsr-ai-tip--right,
.wsr-ai-ring:has(.wsr-ai-hot-6:focus-visible) .wsr-ai-tip-6.wsr-ai-tip--right {
transform: translate(-92%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-7:hover) .wsr-ai-tip-7,
.wsr-ai-ring:has(.wsr-ai-hot-7:focus-visible) .wsr-ai-tip-7 {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-7:hover) .wsr-ai-tip-7.wsr-ai-tip--left,
.wsr-ai-ring:has(.wsr-ai-hot-7:focus-visible) .wsr-ai-tip-7.wsr-ai-tip--left {
transform: translate(-8%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-7:hover) .wsr-ai-tip-7.wsr-ai-tip--right,
.wsr-ai-ring:has(.wsr-ai-hot-7:focus-visible) .wsr-ai-tip-7.wsr-ai-tip--right {
transform: translate(-92%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-8:hover) .wsr-ai-tip-8,
.wsr-ai-ring:has(.wsr-ai-hot-8:focus-visible) .wsr-ai-tip-8 {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-8:hover) .wsr-ai-tip-8.wsr-ai-tip--left,
.wsr-ai-ring:has(.wsr-ai-hot-8:focus-visible) .wsr-ai-tip-8.wsr-ai-tip--left {
transform: translate(-8%, 0) scale(1);
}
.wsr-ai-ring:has(.wsr-ai-hot-8:hover) .wsr-ai-tip-8.wsr-ai-tip--right,
.wsr-ai-ring:has(.wsr-ai-hot-8:focus-visible) .wsr-ai-tip-8.wsr-ai-tip--right {
transform: translate(-92%, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.wsr-ai-icon, .wsr-ai-hot::before, .wsr-ai-tip { transition-duration: 0.01ms !important; }
.wsr-ai-ring:has(.wsr-ai-hot:hover) .wsr-ai-icon { transform: none; }
}
/* =========================================================================
wsr-certframe-20260907 — opus5, 2026-09-07
Dave item 11: "we just want one border and one glow please not 3."
WHAT WAS ACTUALLY WRONG (found by sampling pixels at the frame's edge —
every one was page background rgb(28,28,28), so the border was not painting
at all despite computed style reporting 2px solid rgba(255,59,29,0.6)):
.wsr-legal-nocert-frame is an INLINE-STYLED overlay:
position:absolute; inset:0; border:2px solid rgba(255,59,29,.6);
border-radius:20px; opacity:0; transform:scale(.994);
transition:opacity .35s, transform .35s; pointer-events:none; z-index:3;
It is built as a hover-reveal frame — and NOTHING EVER REVEALS IT. A sweep
of every stylesheet for a rule matching this element that sets opacity or
transform returned ZERO hits. It has been dead markup.
So the only border Dave could see was the stray 1px GREEN ring from the
§15 `:has(img):hover` rule — green, on the "Without Certification" section.
That plus its two glow layers plus the image's own hover was the "3".
Removing that ring earlier was correct, but it left the section with no
border at all, which is what Dave spotted.
FIX: wire the frame the way it was designed, one per section, in its own
colour, and pair it with the single glow already on the image wrapper.
Result on hover: ONE border + ONE glow. Nothing else lights up.
========================================================================= */
.elementor-element-85aa7c8:hover .wsr-legal-nocert-frame,
.elementor-element-10d65e6:hover .wsr-legal-withcert-frame {
opacity: 1 !important;
transform: scale(1) !important;
}
/* the single glow lives on the frame so border and glow are the same object */
.elementor-element-85aa7c8:hover .wsr-legal-nocert-frame {
box-shadow: 0 0 60px rgba(255, 59, 29, 0.35),
0 0 130px rgba(218, 24, 27, 0.18) !important;
}
.elementor-element-10d65e6:hover .wsr-legal-withcert-frame {
box-shadow: 0 0 60px rgba(153, 252, 46, 0.35),
0 0 130px rgba(153, 252, 46, 0.18) !important;
}
/* ...so the image wrapper must NOT glow as well, or we are back to two */
.elementor-element-af6f412:hover,
.elementor-element-468edf4:hover {
box-shadow: none !important;
}
/* =========================================================================
wsr-certframe2-20260907 — opus5, 2026-09-07
⛔ CORRECTS wsr-certframe-20260907 (same file, earlier block).
I claimed .wsr-legal-nocert-frame was "dead markup that nothing ever
reveals" and wired it in CSS. WRONG, on canon and on test:
WSR-SITE-TO-FINISHED-2026-08-27.md §41 documents `setupLegalBorder()` in
overrides.js. It INJECTS the frame and reveals it on mouseenter. The
"glows twice" defect (TWO overlay divs, each with border-radius 20px, both
scaling to (1,1)) was already fixed 2026-08-29 — one div, all four
borders. Verified live today: overrides.js loads, exactly ONE frame per
section, and on mouseenter the INLINE style becomes
`opacity: 1; transform: scale(1)`.
HOW I GOT IT WRONG: I hovered the image immediately after load, read
opacity:0 once, found no CSS rule setting opacity, and concluded nothing
revealed it. The handler simply had not bound yet. A single reading of an
instrument is not a fact — see feedback_a_zero_is_a_claim_about_the_instrument.
The tell I ignored: JS sets INLINE style, so the style ATTRIBUTE (not the
computed value) distinguishes "JS ran" from "CSS won". Check the attribute.
NET CHANGE: drop the CSS opacity/transform override so overrides.js remains
the single source of truth for the border. Keep ONLY the glow, which the JS
does not provide — giving Dave's one border (JS) + one glow (here).
========================================================================= */
/* hand the reveal back to overrides.js — CSS must not fight it */
.elementor-element-85aa7c8:hover .wsr-legal-nocert-frame,
.elementor-element-10d65e6:hover .wsr-legal-withcert-frame {
opacity: unset !important;
transform: unset !important;
}
/* =========================================================================
wsr-footercols-20260907 — opus5, 2026-09-07
Dave: "i want the 3 badges side by side ... which will give more room for
the 3 badges (Footer)".
MEASURED at 3840 before the change: footer-inner 3456px, split
.footer-sec1 35% -> 1199px (the long disclaimer paragraph)
.footer-sec2 18% -> 617px (Quick Links)
.footer-sec3 22% -> 754px (Contact Information)
.footer-sec4 -> 575px (badges + social)
The three badges measure 90 + 110 + 343 = 543px, plus 2 x 16px gaps = 575px
— EXACTLY the column width. So they sat side by side at 3840 and wrapped at
every narrower width. That is why Dave saw two rows and I did not.
Two changes, both needed:
1. the badge row is now flex-wrap:nowrap with min-width:0 on each image so
they shrink together instead of wrapping (done in the widget markup —
min-width:0 is the part people miss: without it a flex item refuses to
shrink below its content size).
2. rebalance the columns to give the badge column real room. The
disclaimer in sec1 is the longest text on the page and can afford it;
Contact Information is now two short lines instead of one long one.
========================================================================= */
.site-footer .footer-sec1 { width: 30% !important; }
.site-footer .footer-sec2 { width: 15% !important; }
.site-footer .footer-sec3 { width: 20% !important; }
.site-footer .footer-sec4 { width: 30% !important; }
/* never let the three badges stack */
.site-footer .wsr-footer-badges {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 14px !important;
width: 100% !important;
}
.site-footer .wsr-footer-badges img {
height: auto !important;
max-height: 110px !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 1 auto !important;
object-fit: contain !important;
}
/* below 991 the footer already stacks to one column — give the badges the
full width there rather than squeezing three into a phone-width row */
@media screen and (max-width: 991px) {
.site-footer .footer-sec1,
.site-footer .footer-sec2,
.site-footer .footer-sec3,
.site-footer .footer-sec4 { width: 100% !important; }
.site-footer .wsr-footer-badges { flex-wrap: wrap !important; }
}
/* =========================================================================
wsr-scalefix-20260907 — opus5, 2026-09-07
⛔ CORRECTS the clamps in wsr-textclamp-20260907 / wsr-spec2-20260907.
THE MISS: Dave's panel is 3840x2160 but his desktop runs at 150% global
scale, so the BROWSER sees 3840 / 1.5 = 2560 CSS px with devicePixelRatio
1.5. Every measurement I took today was at a 3840 viewport he does not have.
Measured at his real 2560 before this block:
heading 60.8px
body copy 20.63px (I had verified 23.5px at 3840)
RA top/bottom 23.06px (I had verified 26px)
So he was seeing barely more than the original 19.2px — which is exactly
what he kept reporting and what I kept "verifying" as fixed.
⛔ THE LESSON: a viewport is a property of the USER'S WINDOW, not of their
panel. Ask for the OS scale factor before trusting a resolution. CSS px =
physical px / scale. 4K at 150% is a 2560 canvas, not a 3840 one.
RETUNED so the TARGET SIZE LANDS AT 2560, and the ceiling holds above it:
body clamp(19.2px, 6.3px + 0.672vw, 23.5px) -> 23.5px @ 2560
RA ends clamp(21.6px, 8.4px + 0.6875vw, 26px) -> 26px @ 2560
Solved from two points: floor at 1920 (unchanged, so nothing at or below
the tested 1920 moves) and target at 2560.
Breakpoint moved 2560 -> 2000 so the scaling is not sitting exactly ON the
boundary. If Dave un-maximises his window even slightly he would drop under
2560 and lose the entire 4K treatment in one pixel. 2000 is above the
09-03 tested range (which topped out at 1920), so nothing already verified
changes.
========================================================================= */
@media (min-width: 2000px) {
.elementor-1947 p,
.elementor-1947 .elementor-widget-text-editor,
.elementor-1947 .elementor-widget-text-editor p {
font-size: clamp(19.2px, 6.3px + 0.672vw, 23.5px) !important;
line-height: 1.55 !important;
}
.elementor-1947 .e-n-tab-title {
font-size: clamp(19.2px, 6.3px + 0.672vw, 23.5px) !important;
}
body.elementor-page-1947 .elementor-1947 .elementor-element.elementor-element-53aa396 p,
body.elementor-page-1947 .elementor-1947 .elementor-element.elementor-element-ab4c84d p {
font-size: clamp(21.6px, 8.4px + 0.6875vw, 26px) !important;
line-height: 1.5 !important;
}
/* the AI-ring explainer boxes were sized for a 3840 canvas too */
.wsr-ai-tip { width: min(460px, 22vw) !important; padding: 20px 24px !important; }
.wsr-ai-tip strong { font-size: 1.35rem !important; }
.wsr-ai-tip span { font-size: 1.15rem !important; }
}
/* =========================================================================
wsr-4kscale-20260907 — opus5, 2026-09-07
4K UPLIFT, SITEWIDE. Dave's brief:
"i build from 4k to phones ... work out what size i was looking at with 150%
and make the entire pages 150%" / "that should be max and we clamp etc
down to a minimum" / "yeah youll have to resize them all"
⛔ SUPERSEDES the wsr-4kmenu draft (deleted, never deployed). That one lifted
the header by hand. This does the whole site in four rules.
THE PROBLEM. Dave designs at 4K with the browser at 150% zoom, which makes the
CSS viewport 3840/1.5 = 2560 and paints every CSS px at 1.5 physical px. At
100% zoom the viewport is a true 3840 and 1 CSS px = 1 physical px, so
everything sized in px — or capped at a 2560-era clamp ceiling — loses a THIRD
of its physical size. Things that are genuinely fluid did not move.
Measured: nav link 20px and header 95px identical at both widths (px, so -33%),
while the h1 went 112.64 -> 168.96 and the hero image 1115 -> 1680 (both x1.50,
physically unchanged, already correct).
WHY ZOOM AND NOT ~700 HAND-WRITTEN RULES. A sweep of every size declaration
that applies above 2560 found 749 capped/fixed declarations ON THE HOMEPAGE
ALONE. Hand-authoring that across 15 pages is unmaintainable. `zoom` reproduces
what the browser itself does at 150% — the exact state Dave has already looked
at and called fine.
⛔ THE ONE THING THAT BREAKS UNDER CSS ZOOM: bare viewport units. `vw`/`vh` do
NOT re-resolve under CSS zoom (measured: `100vw` reported 5760px under zoom
1.5), so a bare vw value applies its viewport share AND then gets multiplied
again. Browser zoom does not have this problem because it genuinely changes the
CSS viewport — which is why CSS `zoom` cannot be used to emulate browser zoom
without the corrections below.
A clamp() with a px CEILING is SAFE: the vw term resolves too large, hits the
2560-tuned ceiling, and the ceiling is then scaled x1.5 — exactly right.
Counted across the live child theme + overrides: 88 viewport-unit values, of
which only 12 are bare (and those are ~5 distinct rules duplicated across the
two files). The other 76 are clamp-capped and need nothing.
`.wsr-ai-tip { width: min(340px, 30vw) }` also needs nothing — 30vw exceeds
340px at both widths, so it behaves as a fixed px value.
⛔ NO BREAKPOINT EXISTS BETWEEN 2561 AND 3840 (highest in either file is
2560px), so no media query evaluates differently under zoom. This is what makes
the approach safe; re-check it before raising the gate.
VERIFIED LIVE on the homepage — captured a 242-element baseline at 2560, then
re-measured the SAME element references at 3840 with this block applied:
font sizes 242 / 242 match
element widths 228 / 229 match (physical, vs 2560 CSS x 1.5)
elements lost 0
new overflow none (maxRight 3882 vs docW 3825, unchanged from baseline)
The single width outlier is an ![]()
at ratio 1.286 — a srcset candidate swap
at the larger viewport, not a layout fault. Flagged, not fixed here.
Gated at min-width:2561px so NOTHING at or below 2560 changes — the current
sizes are the floor, 4K is the max, exactly as Dave specified.
Editor excluded so Elementor's canvas is never zoomed under the builder.
========================================================================= */
@media (min-width: 2561px) {
body:not(.elementor-editor-active) {
zoom: 1.5;
}
/* --- bare viewport units must be divided by the zoom factor ------------- */
body:not(.elementor-editor-active) .home-banner-h1 h1 {
font-size: 2.9333vw !important; /* was 4.4vw */
}
body:not(.elementor-editor-active) .ai-svg-image svg {
width: 66.667vw !important; /* was 100vw */
}
body:not(.elementor-editor-active) .wsr-comp-hero-wash {
min-height: 56.667vh !important; /* was 85vh */
}
}
/* =========================================================================
wsr-glowstack-20260907 — opus5, 2026-09-07
Dave: "get rid of double glowing borders"
THE DEFECT. Hovering one thing lit TWO concentric glows a few px apart,
reading as a doubled border. Cause: the glow selectors match a container AND
a container nested inside it, and :hover propagates to ancestors — so both
paint at once.
MEASURED LIVE on the homepage at 3840 (after excluding the
`@supports not selector(:has(*))` fallback, which is INERT in any browser
that supports :has):
61 live :hover glow rules
52 elements that glow
23 nested glow pairs, in 7 distinct patterns
The dominant pattern (12 of the 23) is `.e-con:has(img)[style*="border"]`
matching a 3421px box inside a 3423px box — two glows 2px apart.
The legal sections are the ones Dave flagged: `.wsr-legal-nocert-frame`
(3422px) sits inside `.wsr-legal-nocert` (3443px) and BOTH glow, plus the
image widget inside them glows a third time.
⛔ THE OBVIOUS FIX IS INVALID CSS. `:has()` may not contain `:has()`, so
.e-con:has(img)[style*="border"]:has(.e-con:has(img)[style*="border"])
throws and the whole rule is dropped — silently, if you do not test it.
Verified in-browser: querySelectorAll on that selector raises. The working
form pushes the inner test past the :has boundary:
.e-con[style*="border"]:has(.e-con[style*="border"] img)
⛔ THE LEGAL FRAMES ARE JS-BUILT. overrides.js setupLegalBorder() injects the
`-frame` div (inset 0) and animates opacity/transform INLINE on mouseenter —
but it does NOT set box-shadow, so the glow is CSS and CSS can suppress it.
The frame is the designed element; the container behind it is the accident.
(That function already carries a comment about an earlier "frame doubled" bug
fixed by collapsing to a single bordered div — same class of defect, again.)
VERIFIED — pos/neg controls on the suppressor before writing it:
.e-con[style*="border"]:has(.e-con[style*="border"] img) -> 12 (the outers)
.e-con[style*="border"]:has(img) -> 19 (all)
...:not(:has(.e-con[style*="border"] img)) -> 7 (innermost, kept)
12 + 7 = 19, so the suppressor takes the outers and leaves the innermost.
RESULT after applying this block, re-running the same detector:
nested glow pairs 23 -> 2
glowing elements 52 -> 27
The 2 survivors are a 358px and a 294px button inside a 3074px card —
a button glow inside a card glow, which is a deliberate effect and a
different thing from a doubled border. Left alone.
========================================================================= */
.e-con[style*="border"]:has(.e-con[style*="border"] img):hover,
.wsr-attack-section .e-con:has(.e-con img):hover,
.wsr-legal-nocert:hover,
.wsr-legal-withcert:hover,
.wsr-legal-nocert .elementor-element-af6f412:hover,
.wsr-legal-withcert .elementor-element-468edf4:hover {
box-shadow: none !important;
}
/* =========================================================================
wsr-borderoff-20260907 — opus5, 2026-09-07
/overwatch (5046) — kills the stray hover lift on containers whose border
is switched OFF.
ROOT CAUSE. The glow rule is keyed on an ATTRIBUTE SUBSTRING:
.e-con:has(img)[style*="border"]:hover
`[style*="border"]` matches the literal text "border" anywhere in the inline
style attribute — including Elementor's own border RESET, which reads
border-width: medium !important; border-style: none !important;
border-color: currentcolor !important; border-image: none !important;
So a container that explicitly has NO border matches a selector written for
containers that HAVE one.
MEASURED LIVE at 3840 before this block:
15 containers with an ![]()
match [style*="border"]
10 of them have their border switched OFF and still take the hover
5 are real bordered cards (inline `border: 1px solid rgba(255,40,20,.8)`)
widest affected container: 3421px -> scale(1.025) moves each edge ~43px
nesting depth 2 (one pair nests), compounding to 1.0506
⛔ WHAT THE AUDIT GOT WRONG — the glow is NOT firing on these 10.
Their inline style also carries `box-shadow: none !important`, and an INLINE
!important outranks an author-stylesheet !important. So the 60px/120px green
glow is already blocked. The ONLY thing landing is
transform: translateY(-6px) scale(1.025) !important
because there is no inline `transform` to block it. That is the whole defect:
a silent lift-and-scale on a 3421px container, no glow. Fixing the glow would
have been fixing nothing.
THE DISCRIMINATOR. Border-OFF containers carry the substring
"border-style: none"; the 5 real cards use the `border:` shorthand and never
contain it. Verified live with both controls:
positive — catches 10/10 border-off containers
negative — 0/5 false positives on the real bordered cards
Scoped with :has(img) + .e-con/.elementor-element so the bare attribute's
16 document-wide hits narrow to exactly the 10 intended.
The image brightness filter on hover is left alone deliberately — it is
subtle and causes no layout movement.
========================================================================= */
.e-con:has(img)[style*="border-style: none"]:hover,
.elementor-element:has(img)[style*="border-style: none"]:hover {
transform: none !important;
z-index: auto !important;
}
/* =========================================================================
wsr-4kscale-20260907 — opus5, 2026-09-07
4K UPLIFT, SITEWIDE. Dave's brief:
"i build from 4k to phones ... work out what size i was looking at with 150%
and make the entire pages 150%" / "that should be max and we clamp etc
down to a minimum" / "yeah youll have to resize them all"
⛔ SUPERSEDES the wsr-4kmenu draft (deleted, never deployed). That one lifted
the header by hand. This does the whole site in four rules.
THE PROBLEM. Dave designs at 4K with the browser at 150% zoom, which makes the
CSS viewport 3840/1.5 = 2560 and paints every CSS px at 1.5 physical px. At
100% zoom the viewport is a true 3840 and 1 CSS px = 1 physical px, so
everything sized in px — or capped at a 2560-era clamp ceiling — loses a THIRD
of its physical size. Things that are genuinely fluid did not move.
Measured: nav link 20px and header 95px identical at both widths (px, so -33%),
while the h1 went 112.64 -> 168.96 and the hero image 1115 -> 1680 (both x1.50,
physically unchanged, already correct).
WHY ZOOM AND NOT ~700 HAND-WRITTEN RULES. A sweep of every size declaration
that applies above 2560 found 749 capped/fixed declarations ON THE HOMEPAGE
ALONE. Hand-authoring that across 15 pages is unmaintainable. `zoom` reproduces
what the browser itself does at 150% — the exact state Dave has already looked
at and called fine.
⛔ THE ONE THING THAT BREAKS UNDER CSS ZOOM: bare viewport units. `vw`/`vh` do
NOT re-resolve under CSS zoom (measured: `100vw` reported 5760px under zoom
1.5), so a bare vw value applies its viewport share AND then gets multiplied
again. Browser zoom does not have this problem because it genuinely changes the
CSS viewport — which is why CSS `zoom` cannot be used to emulate browser zoom
without the corrections below.
A clamp() with a px CEILING is SAFE: the vw term resolves too large, hits the
2560-tuned ceiling, and the ceiling is then scaled x1.5 — exactly right.
Counted across the live child theme + overrides: 88 viewport-unit values, of
which only 12 are bare (and those are ~5 distinct rules duplicated across the
two files). The other 76 are clamp-capped and need nothing.
`.wsr-ai-tip { width: min(340px, 30vw) }` also needs nothing — 30vw exceeds
340px at both widths, so it behaves as a fixed px value.
⛔ NO BREAKPOINT EXISTS BETWEEN 2561 AND 3840 (highest in either file is
2560px), so no media query evaluates differently under zoom. This is what makes
the approach safe; re-check it before raising the gate.
VERIFIED LIVE on the homepage — captured a 242-element baseline at 2560, then
re-measured the SAME element references at 3840 with this block applied:
font sizes 242 / 242 match
element widths 228 / 229 match (physical, vs 2560 CSS x 1.5)
elements lost 0
new overflow none (maxRight 3882 vs docW 3825, unchanged from baseline)
The single width outlier is an ![]()
at ratio 1.286 — a srcset candidate swap
at the larger viewport, not a layout fault. Flagged, not fixed here.
Gated at min-width:2561px so NOTHING at or below 2560 changes — the current
sizes are the floor, 4K is the max, exactly as Dave specified.
Editor excluded so Elementor's canvas is never zoomed under the builder.
========================================================================= */
@media (min-width: 2561px) {
body:not(.elementor-editor-active) {
zoom: 1.5;
}
/* --- bare viewport units must be divided by the zoom factor ------------- */
body:not(.elementor-editor-active) .home-banner-h1 h1 {
font-size: 2.9333vw !important; /* was 4.4vw */
}
body:not(.elementor-editor-active) .ai-svg-image svg {
width: 66.667vw !important; /* was 100vw */
}
body:not(.elementor-editor-active) .wsr-comp-hero-wash {
min-height: 56.667vh !important; /* was 85vh */
}
}
/* =========================================================================
wsr-glowstack-20260907 — opus5, 2026-09-07
Dave: "get rid of double glowing borders"
THE DEFECT. Hovering one thing lit TWO concentric glows a few px apart,
reading as a doubled border. Cause: the glow selectors match a container AND
a container nested inside it, and :hover propagates to ancestors — so both
paint at once.
MEASURED LIVE on the homepage at 3840 (after excluding the
`@supports not selector(:has(*))` fallback, which is INERT in any browser
that supports :has):
61 live :hover glow rules
52 elements that glow
23 nested glow pairs, in 7 distinct patterns
The dominant pattern (12 of the 23) is `.e-con:has(img)[style*="border"]`
matching a 3421px box inside a 3423px box — two glows 2px apart.
The legal sections are the ones Dave flagged: `.wsr-legal-nocert-frame`
(3422px) sits inside `.wsr-legal-nocert` (3443px) and BOTH glow, plus the
image widget inside them glows a third time.
⛔ THE OBVIOUS FIX IS INVALID CSS. `:has()` may not contain `:has()`, so
.e-con:has(img)[style*="border"]:has(.e-con:has(img)[style*="border"])
throws and the whole rule is dropped — silently, if you do not test it.
Verified in-browser: querySelectorAll on that selector raises. The working
form pushes the inner test past the :has boundary:
.e-con[style*="border"]:has(.e-con[style*="border"] img)
⛔ THE LEGAL FRAMES ARE JS-BUILT. overrides.js setupLegalBorder() injects the
`-frame` div (inset 0) and animates opacity/transform INLINE on mouseenter —
but it does NOT set box-shadow, so the glow is CSS and CSS can suppress it.
The frame is the designed element; the container behind it is the accident.
(That function already carries a comment about an earlier "frame doubled" bug
fixed by collapsing to a single bordered div — same class of defect, again.)
VERIFIED — pos/neg controls on the suppressor before writing it:
.e-con[style*="border"]:has(.e-con[style*="border"] img) -> 12 (the outers)
.e-con[style*="border"]:has(img) -> 19 (all)
...:not(:has(.e-con[style*="border"] img)) -> 7 (innermost, kept)
12 + 7 = 19, so the suppressor takes the outers and leaves the innermost.
RESULT after applying this block, re-running the same detector:
nested glow pairs 23 -> 2
glowing elements 52 -> 27
The 2 survivors are a 358px and a 294px button inside a 3074px card —
a button glow inside a card glow, which is a deliberate effect and a
different thing from a doubled border. Left alone.
========================================================================= */
.e-con[style*="border"]:has(.e-con[style*="border"] img):hover,
.wsr-attack-section .e-con:has(.e-con img):hover,
.wsr-legal-nocert:hover,
.wsr-legal-withcert:hover,
.wsr-legal-nocert .elementor-element-af6f412:hover,
.wsr-legal-withcert .elementor-element-468edf4:hover {
box-shadow: none !important;
}
/* =========================================================================
wsr-borderoff-20260907 — opus5, 2026-09-07
/overwatch (5046) — kills the stray hover lift on containers whose border
is switched OFF.
ROOT CAUSE. The glow rule is keyed on an ATTRIBUTE SUBSTRING:
.e-con:has(img)[style*="border"]:hover
`[style*="border"]` matches the literal text "border" anywhere in the inline
style attribute — including Elementor's own border RESET, which reads
border-width: medium !important; border-style: none !important;
border-color: currentcolor !important; border-image: none !important;
So a container that explicitly has NO border matches a selector written for
containers that HAVE one.
MEASURED LIVE at 3840 before this block:
15 containers with an ![]()
match [style*="border"]
10 of them have their border switched OFF and still take the hover
5 are real bordered cards (inline `border: 1px solid rgba(255,40,20,.8)`)
widest affected container: 3421px -> scale(1.025) moves each edge ~43px
nesting depth 2 (one pair nests), compounding to 1.0506
⛔ WHAT THE AUDIT GOT WRONG — the glow is NOT firing on these 10.
Their inline style also carries `box-shadow: none !important`, and an INLINE
!important outranks an author-stylesheet !important. So the 60px/120px green
glow is already blocked. The ONLY thing landing is
transform: translateY(-6px) scale(1.025) !important
because there is no inline `transform` to block it. That is the whole defect:
a silent lift-and-scale on a 3421px container, no glow. Fixing the glow would
have been fixing nothing.
THE DISCRIMINATOR. Border-OFF containers carry the substring
"border-style: none"; the 5 real cards use the `border:` shorthand and never
contain it. Verified live with both controls:
positive — catches 10/10 border-off containers
negative — 0/5 false positives on the real bordered cards
Scoped with :has(img) + .e-con/.elementor-element so the bare attribute's
16 document-wide hits narrow to exactly the 10 intended.
The image brightness filter on hover is left alone deliberately — it is
subtle and causes no layout movement.
========================================================================= */
.e-con:has(img)[style*="border-style: none"]:hover,
.elementor-element:has(img)[style*="border-style: none"]:hover {
transform: none !important;
z-index: auto !important;
}
/* =========================================================================
wsr-debox-ctaband-20260907 — opus5, 2026-09-07
/about (5074) — strips the boxed treatment off the CTA band.
Dave: "we wont reuse that section except for before the footer so put some
buttons but remove the box"
WHAT WAS WRONG. The CTA band "Start Where Everyone Starts. The Free Scan."
(section ab7f5fe, inner container c7aa5b0) was wearing the SAME signature box
as the SITTING DUCK section before the footer — measured identical on both:
green-gradient-box, 3402px wide, 0.667px solid #99FC2E, radius 30px
So the pre-footer section's look was being spent twice on one page. Per the
pinned WSR rule the pre-footer order is CTA band -> IN A NUTSHELL -> SITTING
DUCK, so the CTA band STAYS — only its box treatment is removed.
⛔ position:relative IS DELIBERATELY NOT TOUCHED. The "ATTACK DATABASE" badge
(a264434) is position:absolute and its offsetParent IS this container. Remove
the positioning context and the badge flies to the page corner. Verified after
the change: badge.offsetParent === the container, still anchored.
⛔ THE BOX WAS ALSO HOLDING 353px OF DEAD HEIGHT. Stripping border and
background alone left the container at its old 825px while the content only
needs 472px — a visible hole under the button. height:auto + min-height:0
collapses it. Measured (CSS px, rects divided by the 1.5 zoom):
container 825 -> 343
section 1275 -> 643
⛔ AND THE BODY LINE RAN THE FULL WIDTH once the box stopped constraining it —
3342px, ~246 characters per line. Capped to a 900px centred measure: 3 lines,
~82 chars. Not textbook (45-75) but correct for a short centred CTA.
⛔ MEASURE UNITS: under the 4K zoom, getBoundingClientRect returns ZOOMED px
while font-size stays unzoomed. Divide rects by the zoom factor before
computing anything against font-size or the numbers are 1.5x wrong.
NOTE: the removed gradient used rgba(2,208,90) — #02D05A, the WRONG green,
the same one as the three inline ticks still open on this page.
========================================================================= */
body.page-id-5074 .elementor-element-c7aa5b0 {
border: 0 !important;
border-radius: 0 !important;
background-image: none !important;
background-color: transparent !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
height: auto !important;
min-height: 0 !important;
}
body.page-id-5074 .elementor-element-c7aa5b0:hover {
box-shadow: none !important;
transform: none !important;
}
body.page-id-5074 .elementor-element-c7aa5b0 p {
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* =========================================================================
wsr-hero-noshield-20260907 — opus5, 2026-09-07
/about (5074) hero — removes the green shield/network graphic.
Dave: "remove this" (circled the shield in the hero, right-hand side)
THE TARGET. Widget 10c0a5a, class `banner-svg-image` — an inline