Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 25.61
edited by Agnease
on 2026/06/30 12:29
Change comment: There is no comment for this version
To version 28.19
edited by Agnease
on 2026/07/03 13:03
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -2,94 +2,44 @@
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 - <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>
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>
33 33   </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>
63 63   </div>
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>
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 + />
73 73   </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>
89 89   </div>
90 90   </div>
91 - </div>
92 - </section>
42 + </section>
93 93  #*
94 94   <section class="hero hero-centered" aria-labelledby="hero-title">
95 95   <div class="container hero-inner">
... ... @@ -199,9 +199,9 @@
199 199   </div>
200 200   </section>
201 201  
202 - <section class="industry-trust-section" aria-labelledby="industry-trust-title">
152 + <section class="contrast-band" aria-labelledby="industry-trust-title">
203 203   <div class="container">
204 - <div class="industry-trust-panel">
154 + <div class="contrast-panel">
205 205   <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2>
206 206  
207 207   <p class="section-intro">
... ... @@ -209,7 +209,7 @@
209 209   government institutions, transportation, software development, compliance programs and regulated environments.
210 210   </p>
211 211  
212 - <div class="industry-tags" aria-label="Industries and environments supported">
162 + <div class="contrast-tags" aria-label="Industries and environments supported">
213 213   <span>Healthcare</span>
214 214   <span>Financial services</span>
215 215   <span>Scientific research</span>
... ... @@ -220,7 +220,7 @@
220 220   <span>Regulated environments</span>
221 221   </div>
222 222  
223 - <p class="industry-support">
173 + <p class="contrast-support">
224 224   Organizations rely on these platforms to manage documentation, workflows, compliance processes,
225 225   research knowledge and critical business information. From upgrades and authentication integrations
226 226   to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.
agnease-xwiki-hero.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.Admin
Size
... ... @@ -1,0 +1,1 @@
1 +981.8 KB
Content
XWiki.StyleSheetExtension[0]
code
... ... @@ -247,34 +247,104 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Trust Strip ========== */
250 +/* ========== Contrast Band ========== */
251 251  
252 -.trust-strip {
253 - padding: 18px 0;
254 - border-top: 1px solid @line;
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;
255 255  
256 - ul {
257 - max-width: 960px;
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;
258 258   margin: 0 auto;
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;
282 + text-align: center;
267 267   }
268 268  
269 - li {
270 - display: flex;
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;
271 271   align-items: center;
272 - gap: 7px;
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 + }
273 273   }
328 +}
274 274  
275 - i {
276 - color: @brand;
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;
277 277   }
343 +
344 + .contrast-tags span {
345 + font-size: 12px;
346 + padding: 8px 11px;
347 + }
278 278  }
279 279  
280 280  /* ========== Reusable Grids ========== */
... ... @@ -737,8 +737,8 @@
737 737  
738 738  /* ========== CTA ========== */
739 739  
740 -.cta-section {
741 - padding: @section-padding;
810 +#mainContentArea .cta-section {
811 + padding: 44px 0 56px;
742 742  
743 743   .contact-inline {
744 744   margin: 0;
... ... @@ -750,25 +750,70 @@
750 750   }
751 751  }
752 752  
753 -.cta-panel {
754 - max-width: 860px;
823 +#mainContentArea .cta-panel {
824 + position: relative;
825 + overflow: hidden;
826 + max-width: 1040px;
755 755   margin: 0 auto;
756 - padding: 32px;
757 - border-radius: @radius;
758 - border: 1px solid fade(@brand, 20%);
759 - box-shadow: @shadow-sm;
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;
760 760   text-align: center;
837 +}
761 761  
762 - h2 {
763 - margin-top: 0;
764 - }
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 +}
765 765  
766 - p {
767 - color: @muted;
768 - line-height: 1.55;
769 - }
851 +#mainContentArea .cta-panel h2,
852 +#mainContentArea .cta-panel p,
853 +#mainContentArea .cta-panel .btn {
854 + position: relative;
855 + z-index: 1;
770 770  }
771 771  
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 +
772 772  .resource-inline-cta {
773 773   display: flex;
774 774   align-items: center;
... ... @@ -900,9 +900,14 @@
900 900   gap: 14px;
901 901   }
902 902  
903 - .cta-panel {
904 - padding: 24px 20px;
1018 + #mainContentArea .cta-panel {
1019 + padding: 30px 22px;
1020 + border-radius: 20px;
905 905   }
1022 +
1023 + #mainContentArea .cta-panel .btn-primary {
1024 + width: 100%;
1025 + }
906 906  }
907 907  
908 908  /* ========== Resource / Article Pages ========== */
... ... @@ -1635,8 +1635,8 @@
1635 1635   background-image: none !important;
1636 1636  } */
1637 1637  
1758 +/* ========== Main Page Hero / SaaS Layout ========== */
1638 1638  
1639 -/* ========== Hero ========== */
1640 1640  #mainContentArea .hero.hero-saas {
1641 1641   min-height: auto;
1642 1642   padding: 60px 0 34px;
... ... @@ -1645,18 +1645,21 @@
1645 1645   overflow: hidden;
1646 1646   background: transparent;
1647 1647  }
1768 +
1648 1648  #mainContentArea .hero-layout {
1649 1649   max-width: 1120px;
1650 1650   margin: 0 auto;
1651 1651   display: grid;
1652 - grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
1773 + grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1653 1653   gap: 56px;
1654 1654   align-items: center;
1655 1655  }
1656 -#mainContentArea .hero-copy,
1657 -#mainContentArea .hero.hero-saas .lead {
1777 +
1778 +#mainContentArea .hero-copy {
1779 + min-width: 0;
1658 1658   text-align: left;
1659 1659  }
1782 +
1660 1660  #mainContentArea .hero.hero-saas h1 {
1661 1661   max-width: 640px;
1662 1662   margin: 0 0 26px;
... ... @@ -1665,16 +1665,20 @@
1665 1665   line-height: 1;
1666 1666   letter-spacing: -3px;
1667 1667  }
1791 +
1668 1668  #mainContentArea .hero.hero-saas h1 span {
1669 1669   color: @brand;
1670 1670  }
1795 +
1671 1671  #mainContentArea .hero.hero-saas .lead {
1672 1672   max-width: 590px;
1673 1673   margin: 0 0 28px;
1674 1674   color: #334155;
1800 + text-align: left;
1675 1675   font-size: 18px;
1676 1676   line-height: 1.6;
1677 1677  }
1804 +
1678 1678  #mainContentArea .hero.hero-saas .benefits {
1679 1679   max-width: 620px;
1680 1680   margin: 0 0 30px;
... ... @@ -1687,6 +1687,7 @@
1687 1687   font-size: 15px;
1688 1688   text-align: left;
1689 1689  }
1817 +
1690 1690  #mainContentArea .hero.hero-saas .benefits li {
1691 1691   display: grid;
1692 1692   grid-template-columns: 18px minmax(0, 1fr);
... ... @@ -1695,6 +1695,7 @@
1695 1695   margin: 0;
1696 1696   line-height: 1.45;
1697 1697  }
1826 +
1698 1698  #mainContentArea .hero.hero-saas .benefits li::before {
1699 1699   content: "✓";
1700 1700   display: block;
... ... @@ -1705,212 +1705,192 @@
1705 1705   text-align: left;
1706 1706   margin: 0;
1707 1707  }
1708 -#mainContentArea .hero-actions,
1709 -#mainContentArea #hero-cta {
1837 +
1838 +#mainContentArea .hero.hero-saas .hero-actions,
1839 +#mainContentArea .hero.hero-saas #hero-cta {
1710 1710   display: flex;
1711 1711   flex-wrap: wrap;
1712 1712   justify-content: flex-start;
1713 1713   gap: 12px;
1844 + margin-top: 0;
1714 1714  }
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;
1846 +
1847 +#mainContentArea .hero-image-wrapper {
1848 + min-width: 0;
1738 1738   display: flex;
1850 + justify-content: center;
1739 1739   align-items: center;
1740 - gap: 10px;
1741 - padding: 0 24px;
1742 - border-bottom: 1px solid @line;
1743 - background: fade(#fff, 74%);
1744 1744  }
1745 -#mainContentArea .hero-dot,
1746 -#mainContentArea .hero-status-dot {
1747 - border-radius: 50%;
1853 +
1854 +#mainContentArea .hero-image {
1855 + display: block;
1856 + width: 100%;
1857 + max-width: 620px;
1858 + height: auto;
1859 + border: 0;
1748 1748  }
1749 -#mainContentArea .hero-dot {
1750 - width: 10px;
1751 - height: 10px;
1752 - background: #CBD5E1;
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 + }
1753 1753  }
1754 -#mainContentArea .hero-status-dot {
1755 - width: 8px;
1756 - height: 8px;
1757 - background: @brand;
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 + }
1758 1758  }
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;
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;
1766 1766  }
1767 -#mainContentArea .hero-browser-body {
1768 - display: grid;
1769 - grid-template-columns: 150px minmax(0, 1fr);
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;
1770 1770  }
1771 -#mainContentArea .hero-sidebar {
1772 - padding: 24px 18px;
1773 - border-right: 1px solid @line;
1774 - background: #F8FAFC;
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;
1775 1775  }
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;
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);
1782 1782  }
1783 -#mainContentArea .hero-nav-item {
1784 - gap: 9px;
1785 - padding: 10px 8px;
1786 - color: #334155;
1787 - font-size: 13px;
1974 +
1975 +/* Keep the sidebar clearly separated from the background. */
1976 +#mainContentArea .resource-sidebar {
1977 + background: #fff;
1788 1788  }
1789 -#mainContentArea .hero-nav-icon {
1790 - width: 20px;
1791 - height: 20px;
1792 - border: 1px solid #CBD5E1;
1793 - border-radius: 5px;
1979 +
1980 +/* Make CTA panels stand out more clearly. */
1981 +#mainContentArea .resource-cta,
1982 +#mainContentArea .resource-inline-cta {
1983 + background: #fff;
1794 1794  }
1795 -#mainContentArea .hero-content-panel {
1796 - padding: 26px;
1985 +
1986 +/* Improve table readability on long resource pages. */
1987 +#mainContentArea .resource-content table {
1988 + background: #fff;
1797 1797  }
1798 -#mainContentArea .hero-panel-title,
1799 -#mainContentArea .hero-card-title {
1990 +
1991 +#mainContentArea .resource-content table th {
1800 1800   color: @text;
1801 - font-weight: 800;
1993 + background: #F8FAFC;
1802 1802  }
1803 -#mainContentArea .hero-panel-title {
1804 - margin-bottom: 18px;
1805 - font-size: 20px;
1995 +
1996 +#mainContentArea .resource-content table td {
1997 + color: @text-soft;
1806 1806  }
1807 -#mainContentArea .hero-skeleton {
1808 - height: 8px;
1809 - margin-bottom: 10px;
1810 - border-radius: 10px;
1811 - background: #E2E8F0;
1999 +
2000 +/* Slightly improve paragraph/list contrast in long articles. */
2001 +#mainContentArea .resource-content p,
2002 +#mainContentArea .resource-content li {
2003 + color: @text-soft;
1812 1812  }
1813 -#mainContentArea .hero-skeleton.short {
1814 - width: 64%;
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;
1815 1815  }
1816 -#mainContentArea .hero-dashboard-grid {
1817 - margin-top: 28px;
1818 - display: grid;
1819 - grid-template-columns: repeat(2, minmax(0, 1fr));
1820 - gap: 18px;
2011 +
2012 +@media (max-width: 900px) {
2013 + #mainContentArea .resource-layout {
2014 + padding: 22px;
2015 + }
1821 1821  }
1822 -#mainContentArea .hero-mini-card {
1823 - padding: 18px;
1824 - border: 1px solid @line;
1825 - border-radius: 14px;
1826 - background: #fff;
2017 +
2018 +@media (max-width: 640px) {
2019 + #mainContentArea .resource-layout {
2020 + padding: 18px;
2021 + border-radius: 14px;
2022 + }
1827 1827  }
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 -}
1916 1916  
2025 +