Skip to Content

Changes for page Public Web Site

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