Changes for page Public Web Site

Summary

• Page properties (1 modified, 0 added, 0 removed)
• Attachments (0 modified, 1 added, 0 removed)
  • agnease-xwiki-hero.png
• Objects (1 modified, 0 added, 0 removed)
  • XWiki.StyleSheetExtension[0]

Details

Page properties

Content

...	...	@@ -2,94 +2,44 @@
2	2	#macro (displayPublicContent)
3	3	#set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome'))
4	4	{{html clean="false"}}
5		- <section class="hero hero-saas" id="top">
6		- <div class="container">
7		- <div class="hero-layout">
8		- <div class="hero-copy">
9		- <h1>Professional XWiki consulting <span>and engineering</span></h1>
10		- <p class="lead">
11		- Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care.
12		- </p>
13		- <ul class="benefits">
14		- <li>XWiki LTS upgrades</li>
15		- <li>Maintenance and support</li>
16		- <li>Custom XWiki development</li>
17		- <li>Migrations and integrations</li>
18		- </ul>
19		- <div class="hero-actions" id="hero-cta">
20		- <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">
21		- Book a free discussion
22		- </a>
23		- <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
24		- </div>
25		- </div>
26		- <div class="hero-visual" aria-hidden="true">
27		- <div class="hero-browser">
28		- <div class="hero-browser-top">
29		- <div class="hero-dot"></div>
30		- <div class="hero-dot"></div>
31		- <div class="hero-dot"></div>
32		- <div class="hero-search"></div>
	5	+ <section class="hero hero-saas" id="top">
	6	+ <div class="container">
	7	+ <div class="hero-layout">
	8	+ <div class="hero-copy">
	9	+ <h1>Professional XWiki consulting <span>and engineering</span></h1>
	10	+
	11	+ <p class="lead">
	12	+ Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care.
	13	+ </p>
	14	+
	15	+ <ul class="benefits">
	16	+ <li>XWiki LTS upgrades</li>
	17	+ <li>Maintenance and support</li>
	18	+ <li>Custom XWiki development</li>
	19	+ <li>Migrations and integrations</li>
	20	+ </ul>
	21	+
	22	+ <div class="hero-actions" id="hero-cta">
	23	+ <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">
	24	+ Book a free discussion
	25	+ </a>
	26	+ <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
33	33	</div>
34		- <div class="hero-browser-body">
35		- <div class="hero-sidebar">
36		- <div class="hero-nav-item"><span class="hero-nav-icon"></span>Home</div>
37		- <div class="hero-nav-item"><span class="hero-nav-icon"></span>Documentation</div>
38		- <div class="hero-nav-item"><span class="hero-nav-icon"></span>Processes</div>
39		- <div class="hero-nav-item"><span class="hero-nav-icon"></span>Policies</div>
40		- <div class="hero-nav-item"><span class="hero-nav-icon"></span>Teams</div>
41		- </div>
42		- <div class="hero-content-panel">
43		- <div class="hero-panel-title">Production XWiki Platform</div>
44		- <div class="hero-skeleton"></div>
45		- <div class="hero-skeleton"></div>
46		- <div class="hero-skeleton short"></div>
47		- <div class="hero-dashboard-grid">
48		- <div class="hero-mini-card">
49		- <h4>Recent work</h4>
50		- <div class="hero-status-row"><span class="hero-status-dot"></span>LTS upgrade plan</div>
51		- <div class="hero-status-row"><span class="hero-status-dot"></span>Extension review</div>
52		- <div class="hero-status-row"><span class="hero-status-dot"></span>Production validation</div>
53		- </div>
54		- <div class="hero-mini-card">
55		- <h4>Platform care</h4>
56		- <div class="hero-status-row"><span class="hero-status-dot"></span>Permissions</div>
57		- <div class="hero-status-row"><span class="hero-status-dot"></span>Authentication</div>
58		- <div class="hero-status-row"><span class="hero-status-dot"></span>Maintainability</div>
59		- </div>
60		- </div>
61		- </div>
62		- </div>
63	63	</div>
64		- <div class="hero-floating hero-upgrade-card">
65		- <div class="hero-card-title">Upgrade with confidence</div>
66		- <div class="hero-version-flow">
67		- <div class="hero-version">XWiki<br/>LTS</div>
68		- <div class="hero-arrow">→</div>
69		- <div class="hero-version">Staging</div>
70		- <div class="hero-arrow">→</div>
71		- <div class="hero-version active">Production</div>
72		- </div>
	29	+
	30	+ <div class="hero-image-wrapper">
	31	+ <img
	32	+ class="hero-image"
	33	+ src="$xwiki.getDocument('PublicWebSite.WebHome').getAttachmentURL('agnease-xwiki-hero.png')"
	34	+ alt="Illustration of a professional XWiki platform dashboard with upgrade, security and maintenance elements"
	35	+ width="1200"
	36	+ height="900"
	37	+ loading="eager"
	38	+ />
73	73	</div>
74		- <div class="hero-floating hero-security-card">
75		- <div class="hero-card-title">Security-aware maintenance</div>
76		- <ul>
77		- <li>Permissions review</li>
78		- <li>Authentication support</li>
79		- <li>Audit and traceability</li>
80		- </ul>
81		- </div>
82		- <div class="hero-flow">
83		- <div class="hero-env">Review</div>
84		- <div class="hero-arrow">→</div>
85		- <div class="hero-env">Plan</div>
86		- <div class="hero-arrow">→</div>
87		- <div class="hero-env">Validate</div>
88		- </div>
89	89	</div>
90	90	</div>
91		- </div>
92		- </section>
	42	+ </section>
93	93	#*
94	94	<section class="hero hero-centered" aria-labelledby="hero-title">
95	95	<div class="container hero-inner">
...	...	@@ -199,9 +199,9 @@
199	199	</div>
200	200	</section>
201	201
202		- <section class="industry-trust-section" aria-labelledby="industry-trust-title">
	152	+ <section class="contrast-band" aria-labelledby="industry-trust-title">
203	203	<div class="container">
204		- <div class="industry-trust-panel">
	154	+ <div class="contrast-panel">
205	205	<h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2>
206	206
207	207	<p class="section-intro">
...	...	@@ -209,7 +209,7 @@
209	209	government institutions, transportation, software development, compliance programs and regulated environments.
210	210	</p>
211	211
212		- <div class="industry-tags" aria-label="Industries and environments supported">
	162	+ <div class="contrast-tags" aria-label="Industries and environments supported">
213	213	<span>Healthcare</span>
214	214	<span>Financial services</span>
215	215	<span>Scientific research</span>
...	...	@@ -220,7 +220,7 @@
220	220	<span>Regulated environments</span>
221	221	</div>
222	222
223		- <p class="industry-support">
	173	+ <p class="contrast-support">
224	224	Organizations rely on these platforms to manage documentation, workflows, compliance processes,
225	225	research knowledge and critical business information. From upgrades and authentication integrations
226	226	to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.

agnease-xwiki-hero.png

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.Admin

Size

...	...	@@ -1,0 +1,1 @@
	1	+981.8 KB

Content

XWiki.StyleSheetExtension[0]

code

...	...	@@ -166,14 +166,8 @@
166	166	.btn-secondary {
167	167	color: @text;
168	168	background: #fff;
169		- border: 1px solid fade(@brand, 35%);
	169	+ border: 1px solid fade(@text, 35%);
170	170
171		- &:hover,
172		- &:focus {
173		- color: @brand-strong;
174		- border-color: @brand;
175		- background: @brand-bg;
176		- }
177	177	}
178	178
179	179	/* ========== Hero ========== */
...	...	@@ -253,33 +253,122 @@
253	253	margin-top: 22px;
254	254	}
255	255
256		-/* ========== Trust Strip ========== */
	250	+/* ========== Contrast Band ========== */
257	257
258		-.trust-strip {
259		- padding: 18px 0;
260		- border-top: 1px solid @line;
	252	+.contrast-band {
	253	+ position: relative;
	254	+ overflow: visible;
	255	+ isolation: isolate;
	256	+ padding: 54px 0;
	257	+ border-top: 0;
	258	+ color: #fff;
	259	+ background: transparent;
	260	+}
261	261
262		- ul {
263		- max-width: 960px;
264		- margin: 0 auto;
265		- padding: 0;
266		- list-style: none;
267		- display: flex;
268		- justify-content: center;
269		- gap: 22px;
270		- flex-wrap: wrap;
271		- color: @muted;
272		- font-size: 13px;
273		- }
	262	+.contrast-band::before {
	263	+ content: "";
	264	+ position: absolute;
	265	+ top: 0;
	266	+ bottom: 0;
	267	+ left: 50%;
	268	+ width: calc(100vw - 1px);
	269	+ transform: translateX(-50%);
	270	+ z-index: -2;
	271	+ background:
	272	+ radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
	273	+ radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
	274	+ linear-gradient(135deg, @text 0%, @text-soft 100%);
	275	+}
274	274
275		- li {
276		- display: flex;
277		- align-items: center;
278		- gap: 7px;
	277	+.contrast-band::after {
	278	+ content: "";
	279	+ position: absolute;
	280	+ top: 0;
	281	+ bottom: 0;
	282	+ left: 50%;
	283	+ width: calc(100vw - 1px);
	284	+ transform: translateX(-50%);
	285	+ z-index: -1;
	286	+ background:
	287	+ linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
	288	+ linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
	289	+ background-size: 52px 52px;
	290	+ opacity: .38;
	291	+ pointer-events: none;
	292	+}
	293	+
	294	+.contrast-band .container {
	295	+ position: relative;
	296	+ z-index: 1;
	297	+}
	298	+
	299	+.contrast-panel {
	300	+ max-width: 1040px;
	301	+ margin: 0 auto;
	302	+ text-align: center;
	303	+}
	304	+
	305	+.contrast-band h2 {
	306	+ max-width: 860px;
	307	+ margin: 0 auto 12px;
	308	+ color: #fff;
	309	+}
	310	+
	311	+.contrast-band .section-intro {
	312	+ max-width: 840px;
	313	+ margin: 0 auto 26px;
	314	+ color: #D9E3EE;
	315	+}
	316	+
	317	+.contrast-tags {
	318	+ max-width: 940px;
	319	+ margin: 0 auto;
	320	+ display: flex;
	321	+ flex-wrap: wrap;
	322	+ justify-content: center;
	323	+ gap: 10px;
	324	+}
	325	+
	326	+.contrast-tags span {
	327	+ display: inline-flex;
	328	+ align-items: center;
	329	+ padding: 8px 13px;
	330	+ border: 1px solid fade(#fff, 18%);
	331	+ border-radius: 999px;
	332	+ background: fade(#fff, 8%);
	333	+ color: #F8FAFC;
	334	+ font-size: 13px;
	335	+ font-weight: 700;
	336	+ line-height: 1.2;
	337	+}
	338	+
	339	+.contrast-tags span::before {
	340	+ content: "";
	341	+ width: 7px;
	342	+ height: 7px;
	343	+ margin-right: 8px;
	344	+ border-radius: 50%;
	345	+ background: @brand;
	346	+ box-shadow: 0 0 0 4px fade(@brand, 18%);
	347	+}
	348	+
	349	+.contrast-support {
	350	+ max-width: 860px;
	351	+ margin: 30px auto 0;
	352	+ color: #D9E3EE;
	353	+ text-align: center;
	354	+ font-size: 15px;
	355	+ line-height: 1.7;
	356	+}
	357	+
	358	+@media (max-width: 640px) {
	359	+ .contrast-band {
	360	+ padding: 40px 0;
279	279	}
280	280
281		- i {
282		- color: @brand;
	363	+ .contrast-tags span {
	364	+ font-size: 12px;
	365	+ padding: 8px 11px;
283	283	}
284	284	}
285	285
...	...	@@ -439,80 +439,6 @@
439	439	}
440	440	}
441	441
442		-.industry-trust-section {
443		- background:
444		- radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
445		-
446		- .industry-trust-panel {
447		- max-width: 1040px;
448		- margin: 0 auto;
449		- padding: 30px 28px;
450		- border: 1px solid fade(@brand, 16%);
451		- border-radius: @radius;
452		- background:
453		- radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
454		- box-shadow: @shadow-sm;
455		- text-align: center;
456		- }
457		-
458		- h2 {
459		- margin-bottom: 12px;
460		- }
461		-
462		- .section-intro {
463		- margin-bottom: 20px;
464		- max-width: 820px;
465		- }
466		-
467		- .industry-tags {
468		- max-width: 880px;
469		- margin: 0 auto;
470		- display: flex;
471		- flex-wrap: wrap;
472		- justify-content: center;
473		- gap: 10px;
474		- }
475		-
476		- .industry-tags span {
477		- display: inline-flex;
478		- align-items: center;
479		- padding: 7px 12px;
480		- border: 1px solid fade(@brand, 20%);
481		- border-radius: 999px;
482		- background: #fff;
483		- color: @text;
484		- font-size: 13px;
485		- font-weight: 600;
486		- line-height: 1.2;
487		- box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
488		- }
489		-
490		- .industry-support {
491		- max-width: 820px;
492		- margin: 22px auto 0;
493		- color: @muted;
494		- font-size: 16px;
495		- line-height: 1.6;
496		- }
497		-}
498		-
499		-@media (max-width: 640px) {
500		- .industry-trust-section {
501		- .industry-trust-panel {
502		- padding: 24px 18px;
503		- }
504		-
505		- .industry-tags {
506		- gap: 8px;
507		- }
508		-
509		- .industry-tags span {
510		- font-size: 12px;
511		- padding: 6px 10px;
512		- }
513		- }
514		-}
515		-
516	516	/* ========== Services ========== */
517	517
518	518	.services {
...	...	@@ -743,8 +743,8 @@
743	743
744	744	/* ========== CTA ========== */
745	745
746		-.cta-section {
747		- padding: @section-padding;
	755	+#mainContentArea .cta-section {
	756	+ padding: 44px 0 56px;
748	748
749	749	.contact-inline {
750	750	margin: 0;
...	...	@@ -756,25 +756,70 @@
756	756	}
757	757	}
758	758
759		-.cta-panel {
760		- max-width: 860px;
	768	+#mainContentArea .cta-panel {
	769	+ position: relative;
	770	+ overflow: hidden;
	771	+ max-width: 1040px;
761	761	margin: 0 auto;
762		- padding: 32px;
763		- border-radius: @radius;
764		- border: 1px solid fade(@brand, 20%);
765		- box-shadow: @shadow-sm;
	773	+ padding: 48px 40px;
	774	+ border: 0;
	775	+ border-radius: 26px;
	776	+ background:
	777	+ radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
	778	+ linear-gradient(135deg, @text 0%, @text-soft 100%);
	779	+ color: #fff;
	780	+ box-shadow: @shadow;
766	766	text-align: center;
	782	+}
767	767
768		- h2 {
769		- margin-top: 0;
770		- }
	784	+#mainContentArea .cta-panel::before {
	785	+ content: "";
	786	+ position: absolute;
	787	+ inset: 0;
	788	+ background:
	789	+ linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
	790	+ linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
	791	+ background-size: 48px 48px;
	792	+ opacity: .4;
	793	+ pointer-events: none;
	794	+}
771	771
772		- p {
773		- color: @muted;
774		- line-height: 1.55;
775		- }
	796	+#mainContentArea .cta-panel h2,
	797	+#mainContentArea .cta-panel p,
	798	+#mainContentArea .cta-panel .btn {
	799	+ position: relative;
	800	+ z-index: 1;
776	776	}
777	777
	803	+#mainContentArea .cta-panel h2 {
	804	+ max-width: 760px;
	805	+ margin: 0 auto 16px;
	806	+ color: #fff;
	807	+}
	808	+
	809	+#mainContentArea .cta-panel p {
	810	+ max-width: 760px;
	811	+ margin: 0 auto 28px;
	812	+ color: #DBE4EF;
	813	+ font-size: 16px;
	814	+ line-height: 1.6;
	815	+}
	816	+
	817	+#mainContentArea .cta-panel .btn-primary {
	818	+ border-color: #fff;
	819	+ background: #fff;
	820	+ color: @text;
	821	+ box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
	822	+}
	823	+
	824	+#mainContentArea .cta-panel .btn-primary:hover,
	825	+#mainContentArea .cta-panel .btn-primary:focus {
	826	+ border-color: #fff;
	827	+ background: #fff;
	828	+ color: @brand-strong;
	829	+ text-decoration: none;
	830	+}
	831	+
778	778	.resource-inline-cta {
779	779	display: flex;
780	780	align-items: center;
...	...	@@ -906,9 +906,14 @@
906	906	gap: 14px;
907	907	}
908	908
909		- .cta-panel {
910		- padding: 24px 20px;
	963	+ #mainContentArea .cta-panel {
	964	+ padding: 30px 22px;
	965	+ border-radius: 20px;
911	911	}
	967	+
	968	+ #mainContentArea .cta-panel .btn-primary {
	969	+ width: 100%;
	970	+ }
912	912	}
913	913
914	914	/* ========== Resource / Article Pages ========== */
...	...	@@ -1608,41 +1608,13 @@
1608	1608	background-attachment: fixed;
1609	1609	}
1610	1610
1611		-/* Let the body background show through the XWiki wrappers.
1612		-#mainContentArea,
1613		-.resource-page,
1614		-.resources-index-page {
1615		- background: transparent !important;
1616		- background-image: none !important;
	1670	+#mainContentArea {
	1671	+ padding: 0;
	1672	+ overflow-x: hidden;
1617	1617	}
1618		-*/
1619		-/* Remove local decorative backgrounds that compete with the global gradient.
1620		-.hero,
1621		-.hero.hero-centered,
1622		-.trust-strip,
1623		-.industry-trust-section,
1624		-.split-section,
1625		-.resource-strip,
1626		-.homepage-resource-strip,
1627		-.resource-header,
1628		-.product-section-muted,
1629		-.resources-index-page {
1630		- background: transparent !important;
1631		- background-image: none !important;
1632		-}
1633		- */
1634		-/* Keep large panels readable, but remove their inner gradients.
1635		-.industry-trust-section .industry-trust-panel,
1636		-.cta-panel,
1637		-.resource-inline-cta,
1638		-.resource-note,
1639		-.resource-cta {
1640		- background: #fff !important;
1641		- background-image: none !important;
1642		-} */
1643	1643
	1675	+/* ========== Main Page Hero / SaaS Layout ========== */
1644	1644
1645		-/* ========== Hero ========== */
1646	1646	#mainContentArea .hero.hero-saas {
1647	1647	min-height: auto;
1648	1648	padding: 60px 0 34px;
...	...	@@ -1651,18 +1651,21 @@
1651	1651	overflow: hidden;
1652	1652	background: transparent;
1653	1653	}
	1685	+
1654	1654	#mainContentArea .hero-layout {
1655	1655	max-width: 1120px;
1656	1656	margin: 0 auto;
1657	1657	display: grid;
1658		- grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
	1690	+ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1659	1659	gap: 56px;
1660	1660	align-items: center;
1661	1661	}
1662		-#mainContentArea .hero-copy,
1663		-#mainContentArea .hero.hero-saas .lead {
	1694	+
	1695	+#mainContentArea .hero-copy {
	1696	+ min-width: 0;
1664	1664	text-align: left;
1665	1665	}
	1699	+
1666	1666	#mainContentArea .hero.hero-saas h1 {
1667	1667	max-width: 640px;
1668	1668	margin: 0 0 26px;
...	...	@@ -1671,16 +1671,20 @@
1671	1671	line-height: 1;
1672	1672	letter-spacing: -3px;
1673	1673	}
	1708	+
1674	1674	#mainContentArea .hero.hero-saas h1 span {
1675	1675	color: @brand;
1676	1676	}
	1712	+
1677	1677	#mainContentArea .hero.hero-saas .lead {
1678	1678	max-width: 590px;
1679	1679	margin: 0 0 28px;
1680	1680	color: #334155;
	1717	+ text-align: left;
1681	1681	font-size: 18px;
1682	1682	line-height: 1.6;
1683	1683	}
	1721	+
1684	1684	#mainContentArea .hero.hero-saas .benefits {
1685	1685	max-width: 620px;
1686	1686	margin: 0 0 30px;
...	...	@@ -1693,6 +1693,7 @@
1693	1693	font-size: 15px;
1694	1694	text-align: left;
1695	1695	}
	1734	+
1696	1696	#mainContentArea .hero.hero-saas .benefits li {
1697	1697	display: grid;
1698	1698	grid-template-columns: 18px minmax(0, 1fr);
...	...	@@ -1701,6 +1701,7 @@
1701	1701	margin: 0;
1702	1702	line-height: 1.45;
1703	1703	}
	1743	+
1704	1704	#mainContentArea .hero.hero-saas .benefits li::before {
1705	1705	content: "✓";
1706	1706	display: block;
...	...	@@ -1711,212 +1711,192 @@
1711	1711	text-align: left;
1712	1712	margin: 0;
1713	1713	}
1714		-#mainContentArea .hero-actions,
1715		-#mainContentArea #hero-cta {
	1754	+
	1755	+#mainContentArea .hero.hero-saas .hero-actions,
	1756	+#mainContentArea .hero.hero-saas #hero-cta {
1716	1716	display: flex;
1717	1717	flex-wrap: wrap;
1718	1718	justify-content: flex-start;
1719	1719	gap: 12px;
	1761	+ margin-top: 0;
1720	1720	}
1721		-#mainContentArea .hero-visual {
1722		- position: relative;
1723		- min-height: 540px;
1724		-}
1725		-#mainContentArea .hero-browser,
1726		-#mainContentArea .hero-floating {
1727		- border: 1px solid @line;
1728		- background: fade(#fff, 94%);
1729		- box-shadow: @shadow;
1730		- backdrop-filter: blur(14px);
1731		-}
1732		-#mainContentArea .hero-browser {
1733		- position: absolute;
1734		- top: 8px;
1735		- right: 0;
1736		- width: 100%;
1737		- max-width: 720px;
1738		- overflow: hidden;
1739		- border-radius: 18px;
1740		- background: fade(#fff, 88%);
1741		-}
1742		-#mainContentArea .hero-browser-top {
1743		- height: 58px;
	1763	+
	1764	+#mainContentArea .hero-image-wrapper {
	1765	+ min-width: 0;
1744	1744	display: flex;
	1767	+ justify-content: center;
1745	1745	align-items: center;
1746		- gap: 10px;
1747		- padding: 0 24px;
1748		- border-bottom: 1px solid @line;
1749		- background: fade(#fff, 74%);
1750	1750	}
1751		-#mainContentArea .hero-dot,
1752		-#mainContentArea .hero-status-dot {
1753		- border-radius: 50%;
	1770	+
	1771	+#mainContentArea .hero-image {
	1772	+ display: block;
	1773	+ width: 100%;
	1774	+ max-width: 620px;
	1775	+ height: auto;
	1776	+ border: 0;
1754	1754	}
1755		-#mainContentArea .hero-dot {
1756		- width: 10px;
1757		- height: 10px;
1758		- background: #CBD5E1;
	1778	+
	1779	+/* ========== Main Page Hero Responsive ========== */
	1780	+
	1781	+@media (max-width: 1100px) {
	1782	+ #mainContentArea .hero-layout {
	1783	+ max-width: 760px;
	1784	+ grid-template-columns: 1fr;
	1785	+ gap: 34px;
	1786	+ }
	1787	+
	1788	+ #mainContentArea .hero-copy {
	1789	+ order: 1;
	1790	+ text-align: center;
	1791	+ }
	1792	+
	1793	+ #mainContentArea .hero-image-wrapper {
	1794	+ order: 2;
	1795	+ }
	1796	+
	1797	+ #mainContentArea .hero.hero-saas h1 {
	1798	+ margin-left: auto;
	1799	+ margin-right: auto;
	1800	+ text-align: center;
	1801	+ }
	1802	+
	1803	+ #mainContentArea .hero.hero-saas .lead {
	1804	+ margin-left: auto;
	1805	+ margin-right: auto;
	1806	+ text-align: center;
	1807	+ }
	1808	+
	1809	+ #mainContentArea .hero.hero-saas .benefits {
	1810	+ margin-left: auto;
	1811	+ margin-right: auto;
	1812	+ }
	1813	+
	1814	+ #mainContentArea .hero.hero-saas .hero-actions,
	1815	+ #mainContentArea .hero.hero-saas #hero-cta {
	1816	+ justify-content: center;
	1817	+ }
	1818	+
	1819	+ #mainContentArea .hero-image {
	1820	+ max-width: 620px;
	1821	+ }
1759	1759	}
1760		-#mainContentArea .hero-status-dot {
1761		- width: 8px;
1762		- height: 8px;
1763		- background: @brand;
	1823	+
	1824	+@media (max-width: 640px) {
	1825	+ #mainContentArea .hero.hero-saas {
	1826	+ padding: 42px 0 28px;
	1827	+ }
	1828	+
	1829	+ #mainContentArea .hero-layout {
	1830	+ gap: 28px;
	1831	+ }
	1832	+
	1833	+ #mainContentArea .hero.hero-saas h1 {
	1834	+ font-size: 42px;
	1835	+ letter-spacing: -1.5px;
	1836	+ }
	1837	+
	1838	+ #mainContentArea .hero.hero-saas .lead {
	1839	+ font-size: 17px;
	1840	+ }
	1841	+
	1842	+ #mainContentArea .hero.hero-saas .benefits {
	1843	+ grid-template-columns: 1fr;
	1844	+ }
	1845	+
	1846	+ #mainContentArea .hero-image {
	1847	+ max-width: 100%;
	1848	+ }
1764	1764	}
1765		-#mainContentArea .hero-search {
1766		- margin-left: auto;
1767		- width: 170px;
1768		- height: 26px;
1769		- border: 1px solid #E2E8F0;
1770		- border-radius: 20px;
1771		- background: #F1F5F9;
	1850	+
	1851	+/* ========== Accessibility / Contrast Improvements ========== */
	1852	+
	1853	+/* Make the global background softer and less distracting. */
	1854	+body {
	1855	+ background:
	1856	+ radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
	1857	+ radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
	1858	+ linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
	1859	+ background-attachment: scroll;
1772	1772	}
1773		-#mainContentArea .hero-browser-body {
1774		- display: grid;
1775		- grid-template-columns: 150px minmax(0, 1fr);
	1861	+
	1862	+/* Keep the article area readable while preserving the page background around it. */
	1863	+#mainContentArea .resource-layout {
	1864	+ padding: 28px;
	1865	+ border: 1px solid fade(@line, 85%);
	1866	+ border-radius: @radius;
	1867	+ background: rgba(255, 255, 255, .88);
	1868	+ box-shadow: @shadow-sm;
1776	1776	}
1777		-#mainContentArea .hero-sidebar {
1778		- padding: 24px 18px;
1779		- border-right: 1px solid @line;
1780		- background: #F8FAFC;
	1870	+
	1871	+/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
	1872	+#mainContentArea .widget,
	1873	+#mainContentArea .pathway-card,
	1874	+#mainContentArea .service-card,
	1875	+#mainContentArea .resource-card,
	1876	+#mainContentArea .services .service,
	1877	+#mainContentArea .product-card,
	1878	+#mainContentArea .product-feature,
	1879	+#mainContentArea .product-summary-card,
	1880	+#mainContentArea .product-info-card {
	1881	+ background: #fff;
1781	1781	}
1782		-#mainContentArea .hero-nav-item,
1783		-#mainContentArea .hero-status-row,
1784		-#mainContentArea .hero-version-flow,
1785		-#mainContentArea .hero-flow {
1786		- display: flex;
1787		- align-items: center;
	1883	+
	1884	+/* Make notes more readable and visually stronger. */
	1885	+#mainContentArea .resource-note {
	1886	+ border: 1px solid fade(@brand, 18%);
	1887	+ border-left: 4px solid @brand;
	1888	+ background: #fff;
	1889	+ box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1788	1788	}
1789		-#mainContentArea .hero-nav-item {
1790		- gap: 9px;
1791		- padding: 10px 8px;
1792		- color: #334155;
1793		- font-size: 13px;
	1891	+
	1892	+/* Keep the sidebar clearly separated from the background. */
	1893	+#mainContentArea .resource-sidebar {
	1894	+ background: #fff;
1794	1794	}
1795		-#mainContentArea .hero-nav-icon {
1796		- width: 20px;
1797		- height: 20px;
1798		- border: 1px solid #CBD5E1;
1799		- border-radius: 5px;
	1896	+
	1897	+/* Make CTA panels stand out more clearly. */
	1898	+#mainContentArea .resource-cta,
	1899	+#mainContentArea .resource-inline-cta {
	1900	+ background: #fff;
1800	1800	}
1801		-#mainContentArea .hero-content-panel {
1802		- padding: 26px;
	1902	+
	1903	+/* Improve table readability on long resource pages. */
	1904	+#mainContentArea .resource-content table {
	1905	+ background: #fff;
1803	1803	}
1804		-#mainContentArea .hero-panel-title,
1805		-#mainContentArea .hero-card-title {
	1907	+
	1908	+#mainContentArea .resource-content table th {
1806	1806	color: @text;
1807		- font-weight: 800;
	1910	+ background: #F8FAFC;
1808	1808	}
1809		-#mainContentArea .hero-panel-title {
1810		- margin-bottom: 18px;
1811		- font-size: 20px;
	1912	+
	1913	+#mainContentArea .resource-content table td {
	1914	+ color: @text-soft;
1812	1812	}
1813		-#mainContentArea .hero-skeleton {
1814		- height: 8px;
1815		- margin-bottom: 10px;
1816		- border-radius: 10px;
1817		- background: #E2E8F0;
	1916	+
	1917	+/* Slightly improve paragraph/list contrast in long articles. */
	1918	+#mainContentArea .resource-content p,
	1919	+#mainContentArea .resource-content li {
	1920	+ color: @text-soft;
1818	1818	}
1819		-#mainContentArea .hero-skeleton.short {
1820		- width: 64%;
	1922	+
	1923	+#mainContentArea .resource-content .resource-note p,
	1924	+#mainContentArea .resource-content .resource-checklist li,
	1925	+#mainContentArea .resource-content .process-list li {
	1926	+ color: @muted;
1821	1821	}
1822		-#mainContentArea .hero-dashboard-grid {
1823		- margin-top: 28px;
1824		- display: grid;
1825		- grid-template-columns: repeat(2, minmax(0, 1fr));
1826		- gap: 18px;
	1928	+
	1929	+@media (max-width: 900px) {
	1930	+ #mainContentArea .resource-layout {
	1931	+ padding: 22px;
	1932	+ }
1827	1827	}
1828		-#mainContentArea .hero-mini-card {
1829		- padding: 18px;
1830		- border: 1px solid @line;
1831		- border-radius: 14px;
1832		- background: #fff;
	1934	+
	1935	+@media (max-width: 640px) {
	1936	+ #mainContentArea .resource-layout {
	1937	+ padding: 18px;
	1938	+ border-radius: 14px;
	1939	+ }
1833	1833	}
1834		-#mainContentArea .hero-mini-card h4 {
1835		- margin: 0 0 14px;
1836		- font-size: 15px;
1837		-}
1838		-#mainContentArea .hero-status-row {
1839		- gap: 10px;
1840		- margin: 11px 0;
1841		- color: #475569;
1842		- font-size: 13px;
1843		-}
1844		-#mainContentArea .hero-floating {
1845		- position: absolute;
1846		- border-radius: 16px;
1847		-}
1848		-#mainContentArea .hero-upgrade-card {
1849		- left: 0;
1850		- bottom: 72px;
1851		- width: 320px;
1852		- padding: 20px;
1853		-}
1854		-#mainContentArea .hero-security-card {
1855		- right: 20px;
1856		- top: 260px;
1857		- width: 260px;
1858		- padding: 22px;
1859		-}
1860		-#mainContentArea .hero-security-card ul {
1861		- margin: 0;
1862		- padding: 0;
1863		- list-style: none;
1864		-}
1865		-#mainContentArea .hero-security-card li {
1866		- margin: 12px 0;
1867		- font-size: 14px;
1868		-}
1869		-#mainContentArea .hero-security-card li::before {
1870		- content: "✓";
1871		- margin-right: 8px;
1872		- color: @brand;
1873		- font-weight: 900;
1874		-}
1875		-#mainContentArea .hero-card-title {
1876		- margin-bottom: 16px;
1877		-}
1878		-#mainContentArea .hero-version-flow {
1879		- gap: 8px;
1880		-}
1881		-#mainContentArea .hero-version {
1882		- width: 62px;
1883		- height: 54px;
1884		- padding: 0 8px;
1885		- display: grid;
1886		- place-items: center;
1887		- box-sizing: border-box;
1888		- border-radius: 8px;
1889		- background: #F1F5F9;
1890		- color: #334155;
1891		- text-align: center;
1892		- font-size: 13px;
1893		- line-height: 1.25;
1894		-}
1895		-#mainContentArea .hero-version.active {
1896		- width: 84px;
1897		- background: @text;
1898		- color: #fff;
1899		-}
1900		-#mainContentArea .hero-arrow {
1901		- color: #64748B;
1902		-}
1903		-#mainContentArea .hero-flow {
1904		- position: absolute;
1905		- right: 48px;
1906		- bottom: 18px;
1907		- gap: 12px;
1908		-}
1909		-#mainContentArea .hero-env {
1910		- min-width: 130px;
1911		- padding: 16px 20px;
1912		- border: 1px solid @line;
1913		- border-radius: 12px;
1914		- background: #fff;
1915		- color: #475569;
1916		- text-align: center;
1917		- text-transform: uppercase;
1918		- font-size: 12px;
1919		- letter-spacing: 1.3px;
1920		- box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
1921		-}
1922	1922
	1942	+