Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.21
edited by Agnease
on 2026/07/03 13:08
Change comment: There is no comment for this version
To version 25.50
edited by Agnease
on 2026/06/30 12:25
Change comment: There is no comment for this version

Summary

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-strong, 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 ========== */
... ... @@ -247,111 +247,34 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Contrast Band ========== */
256 +/* ========== Trust Strip ========== */
251 251  
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;
258 +.trust-strip {
259 + padding: 18px 0;
260 + border-top: 1px solid @line;
264 264  
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;
262 + ul {
263 + max-width: 960px;
284 284   margin: 0 auto;
285 - text-align: center;
265 + padding: 0;
266 + list-style: none;
267 + display: flex;
268 + justify-content: center;
269 + gap: 22px;
270 + flex-wrap: wrap;
271 + color: @muted;
272 + font-size: 13px;
286 286   }
287 287  
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 -#mainContentArea {
302 - overflow-x: hidden;
303 -}
304 -
305 -.contrast-tags {
306 - max-width: 940px;
307 - margin: 0 auto;
308 - display: flex;
309 - flex-wrap: wrap;
310 - justify-content: center;
311 - gap: 10px;
312 -
313 - span {
314 - display: inline-flex;
275 + li {
276 + display: flex;
315 315   align-items: center;
316 - padding: 8px 13px;
317 - border: 1px solid fade(#fff, 18%);
318 - border-radius: 999px;
319 - background: fade(#fff, 8%);
320 - color: #F8FAFC;
321 - font-size: 13px;
322 - font-weight: 700;
323 - line-height: 1.2;
324 -
325 - &::before {
326 - content: "";
327 - width: 7px;
328 - height: 7px;
329 - margin-right: 8px;
330 - border-radius: 50%;
331 - background: @brand;
332 - box-shadow: 0 0 0 4px fade(@brand, 18%);
333 - }
278 + gap: 7px;
334 334   }
335 -}
336 336  
337 -.contrast-support {
338 - max-width: 860px;
339 - margin: 30px auto 0;
340 - color: #D9E3EE;
341 - text-align: center;
342 - font-size: 15px;
343 - line-height: 1.7;
344 -}
345 -
346 -@media (max-width: 640px) {
347 - .contrast-band {
348 - padding: 40px 0;
281 + i {
282 + color: @brand;
349 349   }
350 -
351 - .contrast-tags span {
352 - font-size: 12px;
353 - padding: 8px 11px;
354 - }
355 355  }
356 356  
357 357  /* ========== Reusable Grids ========== */
... ... @@ -814,8 +814,8 @@
814 814  
815 815  /* ========== CTA ========== */
816 816  
817 -#mainContentArea .cta-section {
818 - padding: 44px 0 56px;
746 +.cta-section {
747 + padding: @section-padding;
819 819  
820 820   .contact-inline {
821 821   margin: 0;
... ... @@ -827,70 +827,25 @@
827 827   }
828 828  }
829 829  
830 -#mainContentArea .cta-panel {
831 - position: relative;
832 - overflow: hidden;
833 - max-width: 1040px;
759 +.cta-panel {
760 + max-width: 860px;
834 834   margin: 0 auto;
835 - padding: 48px 40px;
836 - border: 0;
837 - border-radius: 26px;
838 - background:
839 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
840 - linear-gradient(135deg, @text 0%, @text-soft 100%);
841 - color: #fff;
842 - box-shadow: @shadow;
762 + padding: 32px;
763 + border-radius: @radius;
764 + border: 1px solid fade(@brand, 20%);
765 + box-shadow: @shadow-sm;
843 843   text-align: center;
844 -}
845 845  
846 -#mainContentArea .cta-panel::before {
847 - content: "";
848 - position: absolute;
849 - inset: 0;
850 - background:
851 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
852 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
853 - background-size: 48px 48px;
854 - opacity: .4;
855 - pointer-events: none;
856 -}
768 + h2 {
769 + margin-top: 0;
770 + }
857 857  
858 -#mainContentArea .cta-panel h2,
859 -#mainContentArea .cta-panel p,
860 -#mainContentArea .cta-panel .btn {
861 - position: relative;
862 - z-index: 1;
772 + p {
773 + color: @muted;
774 + line-height: 1.55;
775 + }
863 863  }
864 864  
865 -#mainContentArea .cta-panel h2 {
866 - max-width: 760px;
867 - margin: 0 auto 16px;
868 - color: #fff;
869 -}
870 -
871 -#mainContentArea .cta-panel p {
872 - max-width: 760px;
873 - margin: 0 auto 28px;
874 - color: #DBE4EF;
875 - font-size: 16px;
876 - line-height: 1.6;
877 -}
878 -
879 -#mainContentArea .cta-panel .btn-primary {
880 - border-color: #fff;
881 - background: #fff;
882 - color: @text;
883 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
884 -}
885 -
886 -#mainContentArea .cta-panel .btn-primary:hover,
887 -#mainContentArea .cta-panel .btn-primary:focus {
888 - border-color: #fff;
889 - background: #fff;
890 - color: @brand-strong;
891 - text-decoration: none;
892 -}
893 -
894 894  .resource-inline-cta {
895 895   display: flex;
896 896   align-items: center;
... ... @@ -1022,14 +1022,9 @@
1022 1022   gap: 14px;
1023 1023   }
1024 1024  
1025 - #mainContentArea .cta-panel {
1026 - padding: 30px 22px;
1027 - border-radius: 20px;
909 + .cta-panel {
910 + padding: 24px 20px;
1028 1028   }
1029 -
1030 - #mainContentArea .cta-panel .btn-primary {
1031 - width: 100%;
1032 - }
1033 1033  }
1034 1034  
1035 1035  /* ========== Resource / Article Pages ========== */
... ... @@ -1762,8 +1762,8 @@
1762 1762   background-image: none !important;
1763 1763  } */
1764 1764  
1765 -/* ========== Main Page Hero / SaaS Layout ========== */
1766 1766  
1645 +/* ========== Hero ========== */
1767 1767  #mainContentArea .hero.hero-saas {
1768 1768   min-height: auto;
1769 1769   padding: 60px 0 34px;
... ... @@ -1772,21 +1772,18 @@
1772 1772   overflow: hidden;
1773 1773   background: transparent;
1774 1774  }
1775 -
1776 1776  #mainContentArea .hero-layout {
1777 1777   max-width: 1120px;
1778 1778   margin: 0 auto;
1779 1779   display: grid;
1780 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1658 + grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
1781 1781   gap: 56px;
1782 1782   align-items: center;
1783 1783  }
1784 -
1785 -#mainContentArea .hero-copy {
1786 - min-width: 0;
1662 +#mainContentArea .hero-copy,
1663 +#mainContentArea .hero.hero-saas .lead {
1787 1787   text-align: left;
1788 1788  }
1789 -
1790 1790  #mainContentArea .hero.hero-saas h1 {
1791 1791   max-width: 640px;
1792 1792   margin: 0 0 26px;
... ... @@ -1795,20 +1795,16 @@
1795 1795   line-height: 1;
1796 1796   letter-spacing: -3px;
1797 1797  }
1798 -
1799 1799  #mainContentArea .hero.hero-saas h1 span {
1800 1800   color: @brand;
1801 1801  }
1802 -
1803 1803  #mainContentArea .hero.hero-saas .lead {
1804 1804   max-width: 590px;
1805 1805   margin: 0 0 28px;
1806 1806   color: #334155;
1807 - text-align: left;
1808 1808   font-size: 18px;
1809 1809   line-height: 1.6;
1810 1810  }
1811 -
1812 1812  #mainContentArea .hero.hero-saas .benefits {
1813 1813   max-width: 620px;
1814 1814   margin: 0 0 30px;
... ... @@ -1821,7 +1821,6 @@
1821 1821   font-size: 15px;
1822 1822   text-align: left;
1823 1823  }
1824 -
1825 1825  #mainContentArea .hero.hero-saas .benefits li {
1826 1826   display: grid;
1827 1827   grid-template-columns: 18px minmax(0, 1fr);
... ... @@ -1830,7 +1830,6 @@
1830 1830   margin: 0;
1831 1831   line-height: 1.45;
1832 1832  }
1833 -
1834 1834  #mainContentArea .hero.hero-saas .benefits li::before {
1835 1835   content: "✓";
1836 1836   display: block;
... ... @@ -1841,192 +1841,212 @@
1841 1841   text-align: left;
1842 1842   margin: 0;
1843 1843  }
1844 -
1845 -#mainContentArea .hero.hero-saas .hero-actions,
1846 -#mainContentArea .hero.hero-saas #hero-cta {
1714 +#mainContentArea .hero-actions,
1715 +#mainContentArea #hero-cta {
1847 1847   display: flex;
1848 1848   flex-wrap: wrap;
1849 1849   justify-content: flex-start;
1850 1850   gap: 12px;
1851 - margin-top: 0;
1852 1852  }
1853 -
1854 -#mainContentArea .hero-image-wrapper {
1855 - 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;
1856 1856   display: flex;
1857 - justify-content: center;
1858 1858   align-items: center;
1746 + gap: 10px;
1747 + padding: 0 24px;
1748 + border-bottom: 1px solid @line;
1749 + background: fade(#fff, 74%);
1859 1859  }
1860 -
1861 -#mainContentArea .hero-image {
1862 - display: block;
1863 - width: 100%;
1864 - max-width: 620px;
1865 - height: auto;
1866 - border: 0;
1751 +#mainContentArea .hero-dot,
1752 +#mainContentArea .hero-status-dot {
1753 + border-radius: 50%;
1867 1867  }
1868 -
1869 -/* ========== Main Page Hero Responsive ========== */
1870 -
1871 -@media (max-width: 1100px) {
1872 - #mainContentArea .hero-layout {
1873 - max-width: 760px;
1874 - grid-template-columns: 1fr;
1875 - gap: 34px;
1876 - }
1877 -
1878 - #mainContentArea .hero-copy {
1879 - order: 1;
1880 - text-align: center;
1881 - }
1882 -
1883 - #mainContentArea .hero-image-wrapper {
1884 - order: 2;
1885 - }
1886 -
1887 - #mainContentArea .hero.hero-saas h1 {
1888 - margin-left: auto;
1889 - margin-right: auto;
1890 - text-align: center;
1891 - }
1892 -
1893 - #mainContentArea .hero.hero-saas .lead {
1894 - margin-left: auto;
1895 - margin-right: auto;
1896 - text-align: center;
1897 - }
1898 -
1899 - #mainContentArea .hero.hero-saas .benefits {
1900 - margin-left: auto;
1901 - margin-right: auto;
1902 - }
1903 -
1904 - #mainContentArea .hero.hero-saas .hero-actions,
1905 - #mainContentArea .hero.hero-saas #hero-cta {
1906 - justify-content: center;
1907 - }
1908 -
1909 - #mainContentArea .hero-image {
1910 - max-width: 620px;
1911 - }
1755 +#mainContentArea .hero-dot {
1756 + width: 10px;
1757 + height: 10px;
1758 + background: #CBD5E1;
1912 1912  }
1913 -
1914 -@media (max-width: 640px) {
1915 - #mainContentArea .hero.hero-saas {
1916 - padding: 42px 0 28px;
1917 - }
1918 -
1919 - #mainContentArea .hero-layout {
1920 - gap: 28px;
1921 - }
1922 -
1923 - #mainContentArea .hero.hero-saas h1 {
1924 - font-size: 42px;
1925 - letter-spacing: -1.5px;
1926 - }
1927 -
1928 - #mainContentArea .hero.hero-saas .lead {
1929 - font-size: 17px;
1930 - }
1931 -
1932 - #mainContentArea .hero.hero-saas .benefits {
1933 - grid-template-columns: 1fr;
1934 - }
1935 -
1936 - #mainContentArea .hero-image {
1937 - max-width: 100%;
1938 - }
1760 +#mainContentArea .hero-status-dot {
1761 + width: 8px;
1762 + height: 8px;
1763 + background: @brand;
1939 1939  }
1940 -
1941 -/* ========== Accessibility / Contrast Improvements ========== */
1942 -
1943 -/* Make the global background softer and less distracting. */
1944 -body {
1945 - background:
1946 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1947 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1948 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1949 - 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;
1950 1950  }
1951 -
1952 -/* Keep the article area readable while preserving the page background around it. */
1953 -#mainContentArea .resource-layout {
1954 - padding: 28px;
1955 - border: 1px solid fade(@line, 85%);
1956 - border-radius: @radius;
1957 - background: rgba(255, 255, 255, .88);
1958 - box-shadow: @shadow-sm;
1773 +#mainContentArea .hero-browser-body {
1774 + display: grid;
1775 + grid-template-columns: 150px minmax(0, 1fr);
1959 1959  }
1960 -
1961 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1962 -#mainContentArea .widget,
1963 -#mainContentArea .pathway-card,
1964 -#mainContentArea .service-card,
1965 -#mainContentArea .resource-card,
1966 -#mainContentArea .services .service,
1967 -#mainContentArea .product-card,
1968 -#mainContentArea .product-feature,
1969 -#mainContentArea .product-summary-card,
1970 -#mainContentArea .product-info-card {
1971 - background: #fff;
1777 +#mainContentArea .hero-sidebar {
1778 + padding: 24px 18px;
1779 + border-right: 1px solid @line;
1780 + background: #F8FAFC;
1972 1972  }
1973 -
1974 -/* Make notes more readable and visually stronger. */
1975 -#mainContentArea .resource-note {
1976 - border: 1px solid fade(@brand, 18%);
1977 - border-left: 4px solid @brand;
1978 - background: #fff;
1979 - 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;
1980 1980  }
1981 -
1982 -/* Keep the sidebar clearly separated from the background. */
1983 -#mainContentArea .resource-sidebar {
1984 - background: #fff;
1789 +#mainContentArea .hero-nav-item {
1790 + gap: 9px;
1791 + padding: 10px 8px;
1792 + color: #334155;
1793 + font-size: 13px;
1985 1985  }
1986 -
1987 -/* Make CTA panels stand out more clearly. */
1988 -#mainContentArea .resource-cta,
1989 -#mainContentArea .resource-inline-cta {
1990 - background: #fff;
1795 +#mainContentArea .hero-nav-icon {
1796 + width: 20px;
1797 + height: 20px;
1798 + border: 1px solid #CBD5E1;
1799 + border-radius: 5px;
1991 1991  }
1992 -
1993 -/* Improve table readability on long resource pages. */
1994 -#mainContentArea .resource-content table {
1995 - background: #fff;
1801 +#mainContentArea .hero-content-panel {
1802 + padding: 26px;
1996 1996  }
1997 -
1998 -#mainContentArea .resource-content table th {
1804 +#mainContentArea .hero-panel-title,
1805 +#mainContentArea .hero-card-title {
1999 1999   color: @text;
2000 - background: #F8FAFC;
1807 + font-weight: 800;
2001 2001  }
2002 -
2003 -#mainContentArea .resource-content table td {
2004 - color: @text-soft;
1809 +#mainContentArea .hero-panel-title {
1810 + margin-bottom: 18px;
1811 + font-size: 20px;
2005 2005  }
2006 -
2007 -/* Slightly improve paragraph/list contrast in long articles. */
2008 -#mainContentArea .resource-content p,
2009 -#mainContentArea .resource-content li {
2010 - color: @text-soft;
1813 +#mainContentArea .hero-skeleton {
1814 + height: 8px;
1815 + margin-bottom: 10px;
1816 + border-radius: 10px;
1817 + background: #E2E8F0;
2011 2011  }
2012 -
2013 -#mainContentArea .resource-content .resource-note p,
2014 -#mainContentArea .resource-content .resource-checklist li,
2015 -#mainContentArea .resource-content .process-list li {
2016 - color: @muted;
1819 +#mainContentArea .hero-skeleton.short {
1820 + width: 64%;
2017 2017  }
2018 -
2019 -@media (max-width: 900px) {
2020 - #mainContentArea .resource-layout {
2021 - padding: 22px;
2022 - }
1822 +#mainContentArea .hero-dashboard-grid {
1823 + margin-top: 28px;
1824 + display: grid;
1825 + grid-template-columns: repeat(2, minmax(0, 1fr));
1826 + gap: 18px;
2023 2023  }
2024 -
2025 -@media (max-width: 640px) {
2026 - #mainContentArea .resource-layout {
2027 - padding: 18px;
2028 - border-radius: 14px;
2029 - }
1828 +#mainContentArea .hero-mini-card {
1829 + padding: 18px;
1830 + border: 1px solid @line;
1831 + border-radius: 14px;
1832 + background: #fff;
2030 2030  }
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 +}
2031 2031  
2032 -