Changes for page Public Web Site

Summary

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

Details

Page properties

Content

...	...	@@ -2,44 +2,94 @@
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		-
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>
	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>
27	27	</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>
28	28	</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		- />
	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>
39	39	</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>
40	40	</div>
41	41	</div>
42		- </section>
	91	+ </div>
	92	+ </section>
43	43	#*
44	44	<section class="hero hero-centered" aria-labelledby="hero-title">
45	45	<div class="container hero-inner">
...	...	@@ -149,9 +149,9 @@
149	149	</div>
150	150	</section>
151	151
152		- <section class="contrast-band" aria-labelledby="industry-trust-title">
	202	+ <section class="industry-trust-section" aria-labelledby="industry-trust-title">
153	153	<div class="container">
154		- <div class="contrast-panel">
	204	+ <div class="industry-trust-panel">
155	155	<h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2>
156	156
157	157	<p class="section-intro">
...	...	@@ -159,7 +159,7 @@
159	159	government institutions, transportation, software development, compliance programs and regulated environments.
160	160	</p>
161	161
162		- <div class="contrast-tags" aria-label="Industries and environments supported">
	212	+ <div class="industry-tags" aria-label="Industries and environments supported">
163	163	<span>Healthcare</span>
164	164	<span>Financial services</span>
165	165	<span>Scientific research</span>
...	...	@@ -170,7 +170,7 @@
170	170	<span>Regulated environments</span>
171	171	</div>
172	172
173		- <p class="contrast-support">
	223	+ <p class="industry-support">
174	174	Organizations rely on these platforms to manage documentation, workflows, compliance processes,
175	175	research knowledge and critical business information. From upgrades and authentication integrations
176	176	to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.

agnease-xwiki-hero.png

Author

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

Size

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

Content

XWiki.StyleSheetExtension[0]

code

...	...	@@ -164,10 +164,16 @@
164	164	}
165	165	*/
166	166	.btn-secondary {
167		- color: @text;
168		- background: #fff;
169		- border: 1px solid fade(@text, 35%);
	167	+ color: @fff;
	168	+ background: @brand-strong;
	169	+ border: 1px solid fade(@brand, 35%);
170	170
	171	+ &:hover,
	172	+ &:focus {
	173	+ color: @brand-strong;
	174	+ border-color: @brand;
	175	+ background: @brand-bg;
	176	+ }
171	171	}
172	172
173	173	/* ========== Hero ========== */
...	...	@@ -737,8 +737,8 @@
737	737
738	738	/* ========== CTA ========== */
739	739
740		-#mainContentArea .cta-section {
741		- padding: 44px 0 56px;
	746	+.cta-section {
	747	+ padding: @section-padding;
742	742
743	743	.contact-inline {
744	744	margin: 0;
...	...	@@ -750,70 +750,25 @@
750	750	}
751	751	}
752	752
753		-#mainContentArea .cta-panel {
754		- position: relative;
755		- overflow: hidden;
756		- max-width: 1040px;
	759	+.cta-panel {
	760	+ max-width: 860px;
757	757	margin: 0 auto;
758		- padding: 48px 40px;
759		- border: 0;
760		- border-radius: 26px;
761		- background:
762		- radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
763		- linear-gradient(135deg, @text 0%, @text-soft 100%);
764		- color: #fff;
765		- box-shadow: @shadow;
	762	+ padding: 32px;
	763	+ border-radius: @radius;
	764	+ border: 1px solid fade(@brand, 20%);
	765	+ box-shadow: @shadow-sm;
766	766	text-align: center;
767		-}
768	768
769		-#mainContentArea .cta-panel::before {
770		- content: "";
771		- position: absolute;
772		- inset: 0;
773		- background:
774		- linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
775		- linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
776		- background-size: 48px 48px;
777		- opacity: .4;
778		- pointer-events: none;
779		-}
	768	+ h2 {
	769	+ margin-top: 0;
	770	+ }
780	780
781		-#mainContentArea .cta-panel h2,
782		-#mainContentArea .cta-panel p,
783		-#mainContentArea .cta-panel .btn {
784		- position: relative;
785		- z-index: 1;
	772	+ p {
	773	+ color: @muted;
	774	+ line-height: 1.55;
	775	+ }
786	786	}
787	787
788		-#mainContentArea .cta-panel h2 {
789		- max-width: 760px;
790		- margin: 0 auto 16px;
791		- color: #fff;
792		-}
793		-
794		-#mainContentArea .cta-panel p {
795		- max-width: 760px;
796		- margin: 0 auto 28px;
797		- color: #DBE4EF;
798		- font-size: 16px;
799		- line-height: 1.6;
800		-}
801		-
802		-#mainContentArea .cta-panel .btn-primary {
803		- border-color: #fff;
804		- background: #fff;
805		- color: @text;
806		- box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
807		-}
808		-
809		-#mainContentArea .cta-panel .btn-primary:hover,
810		-#mainContentArea .cta-panel .btn-primary:focus {
811		- border-color: #fff;
812		- background: #fff;
813		- color: @brand-strong;
814		- text-decoration: none;
815		-}
816		-
817	817	.resource-inline-cta {
818	818	display: flex;
819	819	align-items: center;
...	...	@@ -945,14 +945,9 @@
945	945	gap: 14px;
946	946	}
947	947
948		- #mainContentArea .cta-panel {
949		- padding: 30px 22px;
950		- border-radius: 20px;
	909	+ .cta-panel {
	910	+ padding: 24px 20px;
951	951	}
952		-
953		- #mainContentArea .cta-panel .btn-primary {
954		- width: 100%;
955		- }
956	956	}
957	957
958	958	/* ========== Resource / Article Pages ========== */
...	...	@@ -1685,8 +1685,8 @@
1685	1685	background-image: none !important;
1686	1686	} */
1687	1687
1688		-/* ========== Main Page Hero / SaaS Layout ========== */
1689	1689
	1645	+/* ========== Hero ========== */
1690	1690	#mainContentArea .hero.hero-saas {
1691	1691	min-height: auto;
1692	1692	padding: 60px 0 34px;
...	...	@@ -1695,21 +1695,18 @@
1695	1695	overflow: hidden;
1696	1696	background: transparent;
1697	1697	}
1698		-
1699	1699	#mainContentArea .hero-layout {
1700	1700	max-width: 1120px;
1701	1701	margin: 0 auto;
1702	1702	display: grid;
1703		- grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	1658	+ grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
1704	1704	gap: 56px;
1705	1705	align-items: center;
1706	1706	}
1707		-
1708		-#mainContentArea .hero-copy {
1709		- min-width: 0;
	1662	+#mainContentArea .hero-copy,
	1663	+#mainContentArea .hero.hero-saas .lead {
1710	1710	text-align: left;
1711	1711	}
1712		-
1713	1713	#mainContentArea .hero.hero-saas h1 {
1714	1714	max-width: 640px;
1715	1715	margin: 0 0 26px;
...	...	@@ -1718,20 +1718,16 @@
1718	1718	line-height: 1;
1719	1719	letter-spacing: -3px;
1720	1720	}
1721		-
1722	1722	#mainContentArea .hero.hero-saas h1 span {
1723	1723	color: @brand;
1724	1724	}
1725		-
1726	1726	#mainContentArea .hero.hero-saas .lead {
1727	1727	max-width: 590px;
1728	1728	margin: 0 0 28px;
1729	1729	color: #334155;
1730		- text-align: left;
1731	1731	font-size: 18px;
1732	1732	line-height: 1.6;
1733	1733	}
1734		-
1735	1735	#mainContentArea .hero.hero-saas .benefits {
1736	1736	max-width: 620px;
1737	1737	margin: 0 0 30px;
...	...	@@ -1744,7 +1744,6 @@
1744	1744	font-size: 15px;
1745	1745	text-align: left;
1746	1746	}
1747		-
1748	1748	#mainContentArea .hero.hero-saas .benefits li {
1749	1749	display: grid;
1750	1750	grid-template-columns: 18px minmax(0, 1fr);
...	...	@@ -1753,7 +1753,6 @@
1753	1753	margin: 0;
1754	1754	line-height: 1.45;
1755	1755	}
1756		-
1757	1757	#mainContentArea .hero.hero-saas .benefits li::before {
1758	1758	content: "✓";
1759	1759	display: block;
...	...	@@ -1764,192 +1764,212 @@
1764	1764	text-align: left;
1765	1765	margin: 0;
1766	1766	}
1767		-
1768		-#mainContentArea .hero.hero-saas .hero-actions,
1769		-#mainContentArea .hero.hero-saas #hero-cta {
	1714	+#mainContentArea .hero-actions,
	1715	+#mainContentArea #hero-cta {
1770	1770	display: flex;
1771	1771	flex-wrap: wrap;
1772	1772	justify-content: flex-start;
1773	1773	gap: 12px;
1774		- margin-top: 0;
1775	1775	}
1776		-
1777		-#mainContentArea .hero-image-wrapper {
1778		- min-width: 0;
	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;
1779	1779	display: flex;
1780		- justify-content: center;
1781	1781	align-items: center;
	1746	+ gap: 10px;
	1747	+ padding: 0 24px;
	1748	+ border-bottom: 1px solid @line;
	1749	+ background: fade(#fff, 74%);
1782	1782	}
1783		-
1784		-#mainContentArea .hero-image {
1785		- display: block;
1786		- width: 100%;
1787		- max-width: 620px;
1788		- height: auto;
1789		- border: 0;
	1751	+#mainContentArea .hero-dot,
	1752	+#mainContentArea .hero-status-dot {
	1753	+ border-radius: 50%;
1790	1790	}
1791		-
1792		-/* ========== Main Page Hero Responsive ========== */
1793		-
1794		-@media (max-width: 1100px) {
1795		- #mainContentArea .hero-layout {
1796		- max-width: 760px;
1797		- grid-template-columns: 1fr;
1798		- gap: 34px;
1799		- }
1800		-
1801		- #mainContentArea .hero-copy {
1802		- order: 1;
1803		- text-align: center;
1804		- }
1805		-
1806		- #mainContentArea .hero-image-wrapper {
1807		- order: 2;
1808		- }
1809		-
1810		- #mainContentArea .hero.hero-saas h1 {
1811		- margin-left: auto;
1812		- margin-right: auto;
1813		- text-align: center;
1814		- }
1815		-
1816		- #mainContentArea .hero.hero-saas .lead {
1817		- margin-left: auto;
1818		- margin-right: auto;
1819		- text-align: center;
1820		- }
1821		-
1822		- #mainContentArea .hero.hero-saas .benefits {
1823		- margin-left: auto;
1824		- margin-right: auto;
1825		- }
1826		-
1827		- #mainContentArea .hero.hero-saas .hero-actions,
1828		- #mainContentArea .hero.hero-saas #hero-cta {
1829		- justify-content: center;
1830		- }
1831		-
1832		- #mainContentArea .hero-image {
1833		- max-width: 620px;
1834		- }
	1755	+#mainContentArea .hero-dot {
	1756	+ width: 10px;
	1757	+ height: 10px;
	1758	+ background: #CBD5E1;
1835	1835	}
1836		-
1837		-@media (max-width: 640px) {
1838		- #mainContentArea .hero.hero-saas {
1839		- padding: 42px 0 28px;
1840		- }
1841		-
1842		- #mainContentArea .hero-layout {
1843		- gap: 28px;
1844		- }
1845		-
1846		- #mainContentArea .hero.hero-saas h1 {
1847		- font-size: 42px;
1848		- letter-spacing: -1.5px;
1849		- }
1850		-
1851		- #mainContentArea .hero.hero-saas .lead {
1852		- font-size: 17px;
1853		- }
1854		-
1855		- #mainContentArea .hero.hero-saas .benefits {
1856		- grid-template-columns: 1fr;
1857		- }
1858		-
1859		- #mainContentArea .hero-image {
1860		- max-width: 100%;
1861		- }
	1760	+#mainContentArea .hero-status-dot {
	1761	+ width: 8px;
	1762	+ height: 8px;
	1763	+ background: @brand;
1862	1862	}
1863		-
1864		-/* ========== Accessibility / Contrast Improvements ========== */
1865		-
1866		-/* Make the global background softer and less distracting. */
1867		-body {
1868		- background:
1869		- radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1870		- radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1871		- linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1872		- background-attachment: scroll;
	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;
1873	1873	}
1874		-
1875		-/* Keep the article area readable while preserving the page background around it. */
1876		-#mainContentArea .resource-layout {
1877		- padding: 28px;
1878		- border: 1px solid fade(@line, 85%);
1879		- border-radius: @radius;
1880		- background: rgba(255, 255, 255, .88);
1881		- box-shadow: @shadow-sm;
	1773	+#mainContentArea .hero-browser-body {
	1774	+ display: grid;
	1775	+ grid-template-columns: 150px minmax(0, 1fr);
1882	1882	}
1883		-
1884		-/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1885		-#mainContentArea .widget,
1886		-#mainContentArea .pathway-card,
1887		-#mainContentArea .service-card,
1888		-#mainContentArea .resource-card,
1889		-#mainContentArea .services .service,
1890		-#mainContentArea .product-card,
1891		-#mainContentArea .product-feature,
1892		-#mainContentArea .product-summary-card,
1893		-#mainContentArea .product-info-card {
1894		- background: #fff;
	1777	+#mainContentArea .hero-sidebar {
	1778	+ padding: 24px 18px;
	1779	+ border-right: 1px solid @line;
	1780	+ background: #F8FAFC;
1895	1895	}
1896		-
1897		-/* Make notes more readable and visually stronger. */
1898		-#mainContentArea .resource-note {
1899		- border: 1px solid fade(@brand, 18%);
1900		- border-left: 4px solid @brand;
1901		- background: #fff;
1902		- box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
	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;
1903	1903	}
1904		-
1905		-/* Keep the sidebar clearly separated from the background. */
1906		-#mainContentArea .resource-sidebar {
1907		- background: #fff;
	1789	+#mainContentArea .hero-nav-item {
	1790	+ gap: 9px;
	1791	+ padding: 10px 8px;
	1792	+ color: #334155;
	1793	+ font-size: 13px;
1908	1908	}
1909		-
1910		-/* Make CTA panels stand out more clearly. */
1911		-#mainContentArea .resource-cta,
1912		-#mainContentArea .resource-inline-cta {
1913		- background: #fff;
	1795	+#mainContentArea .hero-nav-icon {
	1796	+ width: 20px;
	1797	+ height: 20px;
	1798	+ border: 1px solid #CBD5E1;
	1799	+ border-radius: 5px;
1914	1914	}
1915		-
1916		-/* Improve table readability on long resource pages. */
1917		-#mainContentArea .resource-content table {
1918		- background: #fff;
	1801	+#mainContentArea .hero-content-panel {
	1802	+ padding: 26px;
1919	1919	}
1920		-
1921		-#mainContentArea .resource-content table th {
	1804	+#mainContentArea .hero-panel-title,
	1805	+#mainContentArea .hero-card-title {
1922	1922	color: @text;
1923		- background: #F8FAFC;
	1807	+ font-weight: 800;
1924	1924	}
1925		-
1926		-#mainContentArea .resource-content table td {
1927		- color: @text-soft;
	1809	+#mainContentArea .hero-panel-title {
	1810	+ margin-bottom: 18px;
	1811	+ font-size: 20px;
1928	1928	}
1929		-
1930		-/* Slightly improve paragraph/list contrast in long articles. */
1931		-#mainContentArea .resource-content p,
1932		-#mainContentArea .resource-content li {
1933		- color: @text-soft;
	1813	+#mainContentArea .hero-skeleton {
	1814	+ height: 8px;
	1815	+ margin-bottom: 10px;
	1816	+ border-radius: 10px;
	1817	+ background: #E2E8F0;
1934	1934	}
1935		-
1936		-#mainContentArea .resource-content .resource-note p,
1937		-#mainContentArea .resource-content .resource-checklist li,
1938		-#mainContentArea .resource-content .process-list li {
1939		- color: @muted;
	1819	+#mainContentArea .hero-skeleton.short {
	1820	+ width: 64%;
1940	1940	}
1941		-
1942		-@media (max-width: 900px) {
1943		- #mainContentArea .resource-layout {
1944		- padding: 22px;
1945		- }
	1822	+#mainContentArea .hero-dashboard-grid {
	1823	+ margin-top: 28px;
	1824	+ display: grid;
	1825	+ grid-template-columns: repeat(2, minmax(0, 1fr));
	1826	+ gap: 18px;
1946	1946	}
1947		-
1948		-@media (max-width: 640px) {
1949		- #mainContentArea .resource-layout {
1950		- padding: 18px;
1951		- border-radius: 14px;
1952		- }
	1828	+#mainContentArea .hero-mini-card {
	1829	+ padding: 18px;
	1830	+ border: 1px solid @line;
	1831	+ border-radius: 14px;
	1832	+ background: #fff;
1953	1953	}
	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	+}
1954	1954
1955		-