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">

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

...	...	@@ -165,7 +165,6 @@
165	165	*/
166	166	.btn-secondary {
167	167	color: @text;
168		- background: #fff;
169	169	border: 1px solid fade(@text, 35%);
170	170
171	171	}
...	...	@@ -737,8 +737,8 @@
737	737
738	738	/* ========== CTA ========== */
739	739
740		-#mainContentArea .cta-section {
741		- padding: 44px 0 56px;
	739	+.cta-section {
	740	+ 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;
	752	+.cta-panel {
	753	+ 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;
	755	+ padding: 32px;
	756	+ border-radius: @radius;
	757	+ border: 1px solid fade(@brand, 20%);
	758	+ 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		-}
	761	+ h2 {
	762	+ margin-top: 0;
	763	+ }
780	780
781		-#mainContentArea .cta-panel h2,
782		-#mainContentArea .cta-panel p,
783		-#mainContentArea .cta-panel .btn {
784		- position: relative;
785		- z-index: 1;
	765	+ p {
	766	+ color: @muted;
	767	+ line-height: 1.55;
	768	+ }
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;
	902	+ .cta-panel {
	903	+ 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
	1638	+/* ========== 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);
	1651	+ 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;
	1655	+#mainContentArea .hero-copy,
	1656	+#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 {
	1707	+#mainContentArea .hero-actions,
	1708	+#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;
	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;
1779	1779	display: flex;
1780		- justify-content: center;
1781	1781	align-items: center;
	1739	+ gap: 10px;
	1740	+ padding: 0 24px;
	1741	+ border-bottom: 1px solid @line;
	1742	+ 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;
	1744	+#mainContentArea .hero-dot,
	1745	+#mainContentArea .hero-status-dot {
	1746	+ 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		- }
	1748	+#mainContentArea .hero-dot {
	1749	+ width: 10px;
	1750	+ height: 10px;
	1751	+ 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		- }
	1753	+#mainContentArea .hero-status-dot {
	1754	+ width: 8px;
	1755	+ height: 8px;
	1756	+ 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;
	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;
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;
	1766	+#mainContentArea .hero-browser-body {
	1767	+ display: grid;
	1768	+ 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;
	1770	+#mainContentArea .hero-sidebar {
	1771	+ padding: 24px 18px;
	1772	+ border-right: 1px solid @line;
	1773	+ 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);
	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;
1903	1903	}
1904		-
1905		-/* Keep the sidebar clearly separated from the background. */
1906		-#mainContentArea .resource-sidebar {
1907		- background: #fff;
	1782	+#mainContentArea .hero-nav-item {
	1783	+ gap: 9px;
	1784	+ padding: 10px 8px;
	1785	+ color: #334155;
	1786	+ 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;
	1788	+#mainContentArea .hero-nav-icon {
	1789	+ width: 20px;
	1790	+ height: 20px;
	1791	+ border: 1px solid #CBD5E1;
	1792	+ border-radius: 5px;
1914	1914	}
1915		-
1916		-/* Improve table readability on long resource pages. */
1917		-#mainContentArea .resource-content table {
1918		- background: #fff;
	1794	+#mainContentArea .hero-content-panel {
	1795	+ padding: 26px;
1919	1919	}
1920		-
1921		-#mainContentArea .resource-content table th {
	1797	+#mainContentArea .hero-panel-title,
	1798	+#mainContentArea .hero-card-title {
1922	1922	color: @text;
1923		- background: #F8FAFC;
	1800	+ font-weight: 800;
1924	1924	}
1925		-
1926		-#mainContentArea .resource-content table td {
1927		- color: @text-soft;
	1802	+#mainContentArea .hero-panel-title {
	1803	+ margin-bottom: 18px;
	1804	+ 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;
	1806	+#mainContentArea .hero-skeleton {
	1807	+ height: 8px;
	1808	+ margin-bottom: 10px;
	1809	+ border-radius: 10px;
	1810	+ 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;
	1812	+#mainContentArea .hero-skeleton.short {
	1813	+ width: 64%;
1940	1940	}
1941		-
1942		-@media (max-width: 900px) {
1943		- #mainContentArea .resource-layout {
1944		- padding: 22px;
1945		- }
	1815	+#mainContentArea .hero-dashboard-grid {
	1816	+ margin-top: 28px;
	1817	+ display: grid;
	1818	+ grid-template-columns: repeat(2, minmax(0, 1fr));
	1819	+ gap: 18px;
1946	1946	}
1947		-
1948		-@media (max-width: 640px) {
1949		- #mainContentArea .resource-layout {
1950		- padding: 18px;
1951		- border-radius: 14px;
1952		- }
	1821	+#mainContentArea .hero-mini-card {
	1822	+ padding: 18px;
	1823	+ border: 1px solid @line;
	1824	+ border-radius: 14px;
	1825	+ background: #fff;
1953	1953	}
	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	+}
1954	1954
1955		-