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

...	...	@@ -165,6 +165,7 @@
165	165	*/
166	166	.btn-secondary {
167	167	color: @text;
	168	+ background: #fff;
168	168	border: 1px solid fade(@text, 35%);
169	169
170	170	}
...	...	@@ -246,34 +246,109 @@
246	246	margin-top: 22px;
247	247	}
248	248
249		-/* ========== Trust Strip ========== */
	250	+/* ========== Contrast Band ========== */
250	250
251		-.trust-strip {
252		- padding: 18px 0;
253		- border-top: 1px solid @line;
	252	+.contrast-band {
	253	+ position: relative;
	254	+ width: 100vw;
	255	+ margin-left: calc(50% - 50vw);
	256	+ margin-right: calc(50% - 50vw);
	257	+ overflow: hidden;
	258	+ padding: 54px 0;
	259	+ background:
	260	+ radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
	261	+ radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
	262	+ linear-gradient(135deg, @text 0%, @text-soft 100%);
	263	+ color: #fff;
254	254
255		- ul {
256		- max-width: 960px;
	265	+ &::before {
	266	+ content: "";
	267	+ position: absolute;
	268	+ inset: 0;
	269	+ background:
	270	+ linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
	271	+ linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
	272	+ background-size: 52px 52px;
	273	+ opacity: .38;
	274	+ pointer-events: none;
	275	+ }
	276	+
	277	+ .container {
	278	+ position: relative;
	279	+ z-index: 1;
	280	+ }
	281	+
	282	+ .contrast-panel {
	283	+ max-width: 1040px;
257	257	margin: 0 auto;
258		- padding: 0;
259		- list-style: none;
260		- display: flex;
261		- justify-content: center;
262		- gap: 22px;
263		- flex-wrap: wrap;
264		- color: @muted;
265		- font-size: 13px;
	285	+ text-align: center;
266	266	}
267	267
268		- li {
269		- display: flex;
	288	+ h2 {
	289	+ max-width: 860px;
	290	+ margin: 0 auto 12px;
	291	+ color: #fff;
	292	+ }
	293	+
	294	+ .section-intro {
	295	+ max-width: 840px;
	296	+ margin: 0 auto 26px;
	297	+ color: #D9E3EE;
	298	+ }
	299	+}
	300	+
	301	+
	302	+
	303	+.contrast-tags {
	304	+ max-width: 940px;
	305	+ margin: 0 auto;
	306	+ display: flex;
	307	+ flex-wrap: wrap;
	308	+ justify-content: center;
	309	+ gap: 10px;
	310	+
	311	+ span {
	312	+ display: inline-flex;
270	270	align-items: center;
271		- gap: 7px;
	314	+ padding: 8px 13px;
	315	+ border: 1px solid fade(#fff, 18%);
	316	+ border-radius: 999px;
	317	+ background: fade(#fff, 8%);
	318	+ color: #F8FAFC;
	319	+ font-size: 13px;
	320	+ font-weight: 700;
	321	+ line-height: 1.2;
	322	+
	323	+ &::before {
	324	+ content: "";
	325	+ width: 7px;
	326	+ height: 7px;
	327	+ margin-right: 8px;
	328	+ border-radius: 50%;
	329	+ background: @brand;
	330	+ box-shadow: 0 0 0 4px fade(@brand, 18%);
	331	+ }
272	272	}
	333	+}
273	273
274		- i {
275		- color: @brand;
	335	+.contrast-support {
	336	+ max-width: 860px;
	337	+ margin: 30px auto 0;
	338	+ color: #D9E3EE;
	339	+ text-align: center;
	340	+ font-size: 15px;
	341	+ line-height: 1.7;
	342	+}
	343	+
	344	+@media (max-width: 640px) {
	345	+ .contrast-band {
	346	+ padding: 40px 0;
276	276	}
	348	+
	349	+ .contrast-tags span {
	350	+ font-size: 12px;
	351	+ padding: 8px 11px;
	352	+ }
277	277	}
278	278
279	279	/* ========== Reusable Grids ========== */
...	...	@@ -736,8 +736,8 @@
736	736
737	737	/* ========== CTA ========== */
738	738
739		-.cta-section {
740		- padding: @section-padding;
	815	+#mainContentArea .cta-section {
	816	+ padding: 44px 0 56px;
741	741
742	742	.contact-inline {
743	743	margin: 0;
...	...	@@ -749,25 +749,70 @@
749	749	}
750	750	}
751	751
752		-.cta-panel {
753		- max-width: 860px;
	828	+#mainContentArea .cta-panel {
	829	+ position: relative;
	830	+ overflow: hidden;
	831	+ max-width: 1040px;
754	754	margin: 0 auto;
755		- padding: 32px;
756		- border-radius: @radius;
757		- border: 1px solid fade(@brand, 20%);
758		- box-shadow: @shadow-sm;
	833	+ padding: 48px 40px;
	834	+ border: 0;
	835	+ border-radius: 26px;
	836	+ background:
	837	+ radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
	838	+ linear-gradient(135deg, @text 0%, @text-soft 100%);
	839	+ color: #fff;
	840	+ box-shadow: @shadow;
759	759	text-align: center;
	842	+}
760	760
761		- h2 {
762		- margin-top: 0;
763		- }
	844	+#mainContentArea .cta-panel::before {
	845	+ content: "";
	846	+ position: absolute;
	847	+ inset: 0;
	848	+ background:
	849	+ linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
	850	+ linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
	851	+ background-size: 48px 48px;
	852	+ opacity: .4;
	853	+ pointer-events: none;
	854	+}
764	764
765		- p {
766		- color: @muted;
767		- line-height: 1.55;
768		- }
	856	+#mainContentArea .cta-panel h2,
	857	+#mainContentArea .cta-panel p,
	858	+#mainContentArea .cta-panel .btn {
	859	+ position: relative;
	860	+ z-index: 1;
769	769	}
770	770
	863	+#mainContentArea .cta-panel h2 {
	864	+ max-width: 760px;
	865	+ margin: 0 auto 16px;
	866	+ color: #fff;
	867	+}
	868	+
	869	+#mainContentArea .cta-panel p {
	870	+ max-width: 760px;
	871	+ margin: 0 auto 28px;
	872	+ color: #DBE4EF;
	873	+ font-size: 16px;
	874	+ line-height: 1.6;
	875	+}
	876	+
	877	+#mainContentArea .cta-panel .btn-primary {
	878	+ border-color: #fff;
	879	+ background: #fff;
	880	+ color: @text;
	881	+ box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
	882	+}
	883	+
	884	+#mainContentArea .cta-panel .btn-primary:hover,
	885	+#mainContentArea .cta-panel .btn-primary:focus {
	886	+ border-color: #fff;
	887	+ background: #fff;
	888	+ color: @brand-strong;
	889	+ text-decoration: none;
	890	+}
	891	+
771	771	.resource-inline-cta {
772	772	display: flex;
773	773	align-items: center;
...	...	@@ -899,9 +899,14 @@
899	899	gap: 14px;
900	900	}
901	901
902		- .cta-panel {
903		- padding: 24px 20px;
	1023	+ #mainContentArea .cta-panel {
	1024	+ padding: 30px 22px;
	1025	+ border-radius: 20px;
904	904	}
	1027	+
	1028	+ #mainContentArea .cta-panel .btn-primary {
	1029	+ width: 100%;
	1030	+ }
905	905	}
906	906
907	907	/* ========== Resource / Article Pages ========== */
...	...	@@ -1634,8 +1634,8 @@
1634	1634	background-image: none !important;
1635	1635	} */
1636	1636
	1763	+/* ========== Main Page Hero / SaaS Layout ========== */
1637	1637
1638		-/* ========== Hero ========== */
1639	1639	#mainContentArea .hero.hero-saas {
1640	1640	min-height: auto;
1641	1641	padding: 60px 0 34px;
...	...	@@ -1644,18 +1644,21 @@
1644	1644	overflow: hidden;
1645	1645	background: transparent;
1646	1646	}
	1773	+
1647	1647	#mainContentArea .hero-layout {
1648	1648	max-width: 1120px;
1649	1649	margin: 0 auto;
1650	1650	display: grid;
1651		- grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
	1778	+ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1652	1652	gap: 56px;
1653	1653	align-items: center;
1654	1654	}
1655		-#mainContentArea .hero-copy,
1656		-#mainContentArea .hero.hero-saas .lead {
	1782	+
	1783	+#mainContentArea .hero-copy {
	1784	+ min-width: 0;
1657	1657	text-align: left;
1658	1658	}
	1787	+
1659	1659	#mainContentArea .hero.hero-saas h1 {
1660	1660	max-width: 640px;
1661	1661	margin: 0 0 26px;
...	...	@@ -1664,16 +1664,20 @@
1664	1664	line-height: 1;
1665	1665	letter-spacing: -3px;
1666	1666	}
	1796	+
1667	1667	#mainContentArea .hero.hero-saas h1 span {
1668	1668	color: @brand;
1669	1669	}
	1800	+
1670	1670	#mainContentArea .hero.hero-saas .lead {
1671	1671	max-width: 590px;
1672	1672	margin: 0 0 28px;
1673	1673	color: #334155;
	1805	+ text-align: left;
1674	1674	font-size: 18px;
1675	1675	line-height: 1.6;
1676	1676	}
	1809	+
1677	1677	#mainContentArea .hero.hero-saas .benefits {
1678	1678	max-width: 620px;
1679	1679	margin: 0 0 30px;
...	...	@@ -1686,6 +1686,7 @@
1686	1686	font-size: 15px;
1687	1687	text-align: left;
1688	1688	}
	1822	+
1689	1689	#mainContentArea .hero.hero-saas .benefits li {
1690	1690	display: grid;
1691	1691	grid-template-columns: 18px minmax(0, 1fr);
...	...	@@ -1694,6 +1694,7 @@
1694	1694	margin: 0;
1695	1695	line-height: 1.45;
1696	1696	}
	1831	+
1697	1697	#mainContentArea .hero.hero-saas .benefits li::before {
1698	1698	content: "✓";
1699	1699	display: block;
...	...	@@ -1704,212 +1704,192 @@
1704	1704	text-align: left;
1705	1705	margin: 0;
1706	1706	}
1707		-#mainContentArea .hero-actions,
1708		-#mainContentArea #hero-cta {
	1842	+
	1843	+#mainContentArea .hero.hero-saas .hero-actions,
	1844	+#mainContentArea .hero.hero-saas #hero-cta {
1709	1709	display: flex;
1710	1710	flex-wrap: wrap;
1711	1711	justify-content: flex-start;
1712	1712	gap: 12px;
	1849	+ margin-top: 0;
1713	1713	}
1714		-#mainContentArea .hero-visual {
1715		- position: relative;
1716		- min-height: 540px;
1717		-}
1718		-#mainContentArea .hero-browser,
1719		-#mainContentArea .hero-floating {
1720		- border: 1px solid @line;
1721		- background: fade(#fff, 94%);
1722		- box-shadow: @shadow;
1723		- backdrop-filter: blur(14px);
1724		-}
1725		-#mainContentArea .hero-browser {
1726		- position: absolute;
1727		- top: 8px;
1728		- right: 0;
1729		- width: 100%;
1730		- max-width: 720px;
1731		- overflow: hidden;
1732		- border-radius: 18px;
1733		- background: fade(#fff, 88%);
1734		-}
1735		-#mainContentArea .hero-browser-top {
1736		- height: 58px;
	1851	+
	1852	+#mainContentArea .hero-image-wrapper {
	1853	+ min-width: 0;
1737	1737	display: flex;
	1855	+ justify-content: center;
1738	1738	align-items: center;
1739		- gap: 10px;
1740		- padding: 0 24px;
1741		- border-bottom: 1px solid @line;
1742		- background: fade(#fff, 74%);
1743	1743	}
1744		-#mainContentArea .hero-dot,
1745		-#mainContentArea .hero-status-dot {
1746		- border-radius: 50%;
	1858	+
	1859	+#mainContentArea .hero-image {
	1860	+ display: block;
	1861	+ width: 100%;
	1862	+ max-width: 620px;
	1863	+ height: auto;
	1864	+ border: 0;
1747	1747	}
1748		-#mainContentArea .hero-dot {
1749		- width: 10px;
1750		- height: 10px;
1751		- background: #CBD5E1;
	1866	+
	1867	+/* ========== Main Page Hero Responsive ========== */
	1868	+
	1869	+@media (max-width: 1100px) {
	1870	+ #mainContentArea .hero-layout {
	1871	+ max-width: 760px;
	1872	+ grid-template-columns: 1fr;
	1873	+ gap: 34px;
	1874	+ }
	1875	+
	1876	+ #mainContentArea .hero-copy {
	1877	+ order: 1;
	1878	+ text-align: center;
	1879	+ }
	1880	+
	1881	+ #mainContentArea .hero-image-wrapper {
	1882	+ order: 2;
	1883	+ }
	1884	+
	1885	+ #mainContentArea .hero.hero-saas h1 {
	1886	+ margin-left: auto;
	1887	+ margin-right: auto;
	1888	+ text-align: center;
	1889	+ }
	1890	+
	1891	+ #mainContentArea .hero.hero-saas .lead {
	1892	+ margin-left: auto;
	1893	+ margin-right: auto;
	1894	+ text-align: center;
	1895	+ }
	1896	+
	1897	+ #mainContentArea .hero.hero-saas .benefits {
	1898	+ margin-left: auto;
	1899	+ margin-right: auto;
	1900	+ }
	1901	+
	1902	+ #mainContentArea .hero.hero-saas .hero-actions,
	1903	+ #mainContentArea .hero.hero-saas #hero-cta {
	1904	+ justify-content: center;
	1905	+ }
	1906	+
	1907	+ #mainContentArea .hero-image {
	1908	+ max-width: 620px;
	1909	+ }
1752	1752	}
1753		-#mainContentArea .hero-status-dot {
1754		- width: 8px;
1755		- height: 8px;
1756		- background: @brand;
	1911	+
	1912	+@media (max-width: 640px) {
	1913	+ #mainContentArea .hero.hero-saas {
	1914	+ padding: 42px 0 28px;
	1915	+ }
	1916	+
	1917	+ #mainContentArea .hero-layout {
	1918	+ gap: 28px;
	1919	+ }
	1920	+
	1921	+ #mainContentArea .hero.hero-saas h1 {
	1922	+ font-size: 42px;
	1923	+ letter-spacing: -1.5px;
	1924	+ }
	1925	+
	1926	+ #mainContentArea .hero.hero-saas .lead {
	1927	+ font-size: 17px;
	1928	+ }
	1929	+
	1930	+ #mainContentArea .hero.hero-saas .benefits {
	1931	+ grid-template-columns: 1fr;
	1932	+ }
	1933	+
	1934	+ #mainContentArea .hero-image {
	1935	+ max-width: 100%;
	1936	+ }
1757	1757	}
1758		-#mainContentArea .hero-search {
1759		- margin-left: auto;
1760		- width: 170px;
1761		- height: 26px;
1762		- border: 1px solid #E2E8F0;
1763		- border-radius: 20px;
1764		- background: #F1F5F9;
	1938	+
	1939	+/* ========== Accessibility / Contrast Improvements ========== */
	1940	+
	1941	+/* Make the global background softer and less distracting. */
	1942	+body {
	1943	+ background:
	1944	+ radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
	1945	+ radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
	1946	+ linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
	1947	+ background-attachment: scroll;
1765	1765	}
1766		-#mainContentArea .hero-browser-body {
1767		- display: grid;
1768		- grid-template-columns: 150px minmax(0, 1fr);
	1949	+
	1950	+/* Keep the article area readable while preserving the page background around it. */
	1951	+#mainContentArea .resource-layout {
	1952	+ padding: 28px;
	1953	+ border: 1px solid fade(@line, 85%);
	1954	+ border-radius: @radius;
	1955	+ background: rgba(255, 255, 255, .88);
	1956	+ box-shadow: @shadow-sm;
1769	1769	}
1770		-#mainContentArea .hero-sidebar {
1771		- padding: 24px 18px;
1772		- border-right: 1px solid @line;
1773		- background: #F8FAFC;
	1958	+
	1959	+/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
	1960	+#mainContentArea .widget,
	1961	+#mainContentArea .pathway-card,
	1962	+#mainContentArea .service-card,
	1963	+#mainContentArea .resource-card,
	1964	+#mainContentArea .services .service,
	1965	+#mainContentArea .product-card,
	1966	+#mainContentArea .product-feature,
	1967	+#mainContentArea .product-summary-card,
	1968	+#mainContentArea .product-info-card {
	1969	+ background: #fff;
1774	1774	}
1775		-#mainContentArea .hero-nav-item,
1776		-#mainContentArea .hero-status-row,
1777		-#mainContentArea .hero-version-flow,
1778		-#mainContentArea .hero-flow {
1779		- display: flex;
1780		- align-items: center;
	1971	+
	1972	+/* Make notes more readable and visually stronger. */
	1973	+#mainContentArea .resource-note {
	1974	+ border: 1px solid fade(@brand, 18%);
	1975	+ border-left: 4px solid @brand;
	1976	+ background: #fff;
	1977	+ box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1781	1781	}
1782		-#mainContentArea .hero-nav-item {
1783		- gap: 9px;
1784		- padding: 10px 8px;
1785		- color: #334155;
1786		- font-size: 13px;
	1979	+
	1980	+/* Keep the sidebar clearly separated from the background. */
	1981	+#mainContentArea .resource-sidebar {
	1982	+ background: #fff;
1787	1787	}
1788		-#mainContentArea .hero-nav-icon {
1789		- width: 20px;
1790		- height: 20px;
1791		- border: 1px solid #CBD5E1;
1792		- border-radius: 5px;
	1984	+
	1985	+/* Make CTA panels stand out more clearly. */
	1986	+#mainContentArea .resource-cta,
	1987	+#mainContentArea .resource-inline-cta {
	1988	+ background: #fff;
1793	1793	}
1794		-#mainContentArea .hero-content-panel {
1795		- padding: 26px;
	1990	+
	1991	+/* Improve table readability on long resource pages. */
	1992	+#mainContentArea .resource-content table {
	1993	+ background: #fff;
1796	1796	}
1797		-#mainContentArea .hero-panel-title,
1798		-#mainContentArea .hero-card-title {
	1995	+
	1996	+#mainContentArea .resource-content table th {
1799	1799	color: @text;
1800		- font-weight: 800;
	1998	+ background: #F8FAFC;
1801	1801	}
1802		-#mainContentArea .hero-panel-title {
1803		- margin-bottom: 18px;
1804		- font-size: 20px;
	2000	+
	2001	+#mainContentArea .resource-content table td {
	2002	+ color: @text-soft;
1805	1805	}
1806		-#mainContentArea .hero-skeleton {
1807		- height: 8px;
1808		- margin-bottom: 10px;
1809		- border-radius: 10px;
1810		- background: #E2E8F0;
	2004	+
	2005	+/* Slightly improve paragraph/list contrast in long articles. */
	2006	+#mainContentArea .resource-content p,
	2007	+#mainContentArea .resource-content li {
	2008	+ color: @text-soft;
1811	1811	}
1812		-#mainContentArea .hero-skeleton.short {
1813		- width: 64%;
	2010	+
	2011	+#mainContentArea .resource-content .resource-note p,
	2012	+#mainContentArea .resource-content .resource-checklist li,
	2013	+#mainContentArea .resource-content .process-list li {
	2014	+ color: @muted;
1814	1814	}
1815		-#mainContentArea .hero-dashboard-grid {
1816		- margin-top: 28px;
1817		- display: grid;
1818		- grid-template-columns: repeat(2, minmax(0, 1fr));
1819		- gap: 18px;
	2016	+
	2017	+@media (max-width: 900px) {
	2018	+ #mainContentArea .resource-layout {
	2019	+ padding: 22px;
	2020	+ }
1820	1820	}
1821		-#mainContentArea .hero-mini-card {
1822		- padding: 18px;
1823		- border: 1px solid @line;
1824		- border-radius: 14px;
1825		- background: #fff;
	2022	+
	2023	+@media (max-width: 640px) {
	2024	+ #mainContentArea .resource-layout {
	2025	+ padding: 18px;
	2026	+ border-radius: 14px;
	2027	+ }
1826	1826	}
1827		-#mainContentArea .hero-mini-card h4 {
1828		- margin: 0 0 14px;
1829		- font-size: 15px;
1830		-}
1831		-#mainContentArea .hero-status-row {
1832		- gap: 10px;
1833		- margin: 11px 0;
1834		- color: #475569;
1835		- font-size: 13px;
1836		-}
1837		-#mainContentArea .hero-floating {
1838		- position: absolute;
1839		- border-radius: 16px;
1840		-}
1841		-#mainContentArea .hero-upgrade-card {
1842		- left: 0;
1843		- bottom: 72px;
1844		- width: 320px;
1845		- padding: 20px;
1846		-}
1847		-#mainContentArea .hero-security-card {
1848		- right: 20px;
1849		- top: 260px;
1850		- width: 260px;
1851		- padding: 22px;
1852		-}
1853		-#mainContentArea .hero-security-card ul {
1854		- margin: 0;
1855		- padding: 0;
1856		- list-style: none;
1857		-}
1858		-#mainContentArea .hero-security-card li {
1859		- margin: 12px 0;
1860		- font-size: 14px;
1861		-}
1862		-#mainContentArea .hero-security-card li::before {
1863		- content: "✓";
1864		- margin-right: 8px;
1865		- color: @brand;
1866		- font-weight: 900;
1867		-}
1868		-#mainContentArea .hero-card-title {
1869		- margin-bottom: 16px;
1870		-}
1871		-#mainContentArea .hero-version-flow {
1872		- gap: 8px;
1873		-}
1874		-#mainContentArea .hero-version {
1875		- width: 62px;
1876		- height: 54px;
1877		- padding: 0 8px;
1878		- display: grid;
1879		- place-items: center;
1880		- box-sizing: border-box;
1881		- border-radius: 8px;
1882		- background: #F1F5F9;
1883		- color: #334155;
1884		- text-align: center;
1885		- font-size: 13px;
1886		- line-height: 1.25;
1887		-}
1888		-#mainContentArea .hero-version.active {
1889		- width: 84px;
1890		- background: @text;
1891		- color: #fff;
1892		-}
1893		-#mainContentArea .hero-arrow {
1894		- color: #64748B;
1895		-}
1896		-#mainContentArea .hero-flow {
1897		- position: absolute;
1898		- right: 48px;
1899		- bottom: 18px;
1900		- gap: 12px;
1901		-}
1902		-#mainContentArea .hero-env {
1903		- min-width: 130px;
1904		- padding: 16px 20px;
1905		- border: 1px solid @line;
1906		- border-radius: 12px;
1907		- background: #fff;
1908		- color: #475569;
1909		- text-align: center;
1910		- text-transform: uppercase;
1911		- font-size: 12px;
1912		- letter-spacing: 1.3px;
1913		- box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
1914		-}
1915	1915
	2030	+