Changes for page Public Web Site

Summary

• Page properties (1 modified, 0 added, 0 removed)
• Objects (1 modified, 0 added, 0 removed)
  • XWiki.StyleSheetExtension[0]

Details

Page properties

Content

...	...	@@ -3,43 +3,43 @@
3	3	#set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome'))
4	4	{{html clean="false"}}
5	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>
	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	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>
	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	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>
	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	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>
27		- </div>
	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>
28	28	</div>
	28	+ </div>
29	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		- />
39		- </div>
	30	+ <div class="hero-image-wrapper">
	31	+ <img
	32	+ class="hero-image"
	33	+ src="$doc.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	+ />
40	40	</div>
41	41	</div>
42		- </section>
	41	+ </div>
	42	+ </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">
	152	+ <section class="industry-trust-section" aria-labelledby="industry-trust-title">
153	153	<div class="container">
154		- <div class="contrast-panel">
	154	+ <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">
	162	+ <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">
	173	+ <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.

XWiki.StyleSheetExtension[0]

code

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