Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.28
edited by Agnease
on 2026/07/03 13:25
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,112 +247,33 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Contrast Band ========== */
256 +/* ========== Trust Strip ========== */
251 251  
252 -.contrast-band {
253 - position: relative;
254 - overflow: hidden;
255 - padding: 54px 0;
256 - border-top: 0;
257 - background:
258 - radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
259 - radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
260 - linear-gradient(135deg, @text 0%, @text-soft 100%);
261 - color: #fff;
258 +.trust-strip {
259 + padding: 18px 0;
260 + border-top: 1px solid @line;
262 262  
263 - /*
264 - * Full-bleed background without changing layout width.
265 - * This extends the dark surface beyond a fixed-width parent
266 - * without using 100vw or negative margins.
267 - */
268 - box-shadow: 0 0 0 100vmax @text;
269 - clip-path: inset(0 -100vmax);
270 -}
262 + ul {
263 + max-width: 960px;
264 + margin: 0 auto;
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;
273 + }
271 271  
272 -.contrast-band::before {
273 - content: "";
274 - position: absolute;
275 - inset: 0;
276 - background:
277 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
278 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
279 - background-size: 52px 52px;
280 - opacity: .38;
281 - pointer-events: none;
282 -}
283 -
284 -.contrast-band .container {
285 - position: relative;
286 - z-index: 1;
287 -}
288 -
289 -.contrast-panel {
290 - max-width: 1040px;
291 - margin: 0 auto;
292 - text-align: center;
293 -}
294 -
295 -.contrast-band h2 {
296 - max-width: 860px;
297 - margin: 0 auto 12px;
298 - color: #fff;
299 -}
300 -
301 -.contrast-band .section-intro {
302 - max-width: 840px;
303 - margin: 0 auto 26px;
304 - color: #D9E3EE;
305 -}
306 -
307 -.contrast-tags {
308 - max-width: 940px;
309 - margin: 0 auto;
310 - display: flex;
311 - flex-wrap: wrap;
312 - justify-content: center;
313 - gap: 10px;
314 -}
315 -
316 -.contrast-tags span {
317 - display: inline-flex;
318 - align-items: center;
319 - padding: 8px 13px;
320 - border: 1px solid fade(#fff, 18%);
321 - border-radius: 999px;
322 - background: fade(#fff, 8%);
323 - color: #F8FAFC;
324 - font-size: 13px;
325 - font-weight: 700;
326 - line-height: 1.2;
327 -}
328 -
329 -.contrast-tags span::before {
330 - content: "";
331 - width: 7px;
332 - height: 7px;
333 - margin-right: 8px;
334 - border-radius: 50%;
335 - background: @brand;
336 - box-shadow: 0 0 0 4px fade(@brand, 18%);
337 -}
338 -
339 -.contrast-support {
340 - max-width: 860px;
341 - margin: 30px auto 0;
342 - color: #D9E3EE;
343 - text-align: center;
344 - font-size: 15px;
345 - line-height: 1.7;
346 -}
347 -
348 -@media (max-width: 640px) {
349 - .contrast-band {
350 - padding: 40px 0;
275 + li {
276 + display: flex;
277 + align-items: center;
278 + gap: 7px;
351 351   }
352 352  
353 - .contrast-tags span {
354 - font-size: 12px;
355 - padding: 8px 11px;
281 + i {
282 + color: @brand;
356 356   }
357 357  }
358 358  
... ... @@ -512,6 +512,80 @@
512 512   }
513 513  }
514 514  
442 +.industry-trust-section {
443 + background:
444 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
445 +
446 + .industry-trust-panel {
447 + max-width: 1040px;
448 + margin: 0 auto;
449 + padding: 30px 28px;
450 + border: 1px solid fade(@brand, 16%);
451 + border-radius: @radius;
452 + background:
453 + radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
454 + box-shadow: @shadow-sm;
455 + text-align: center;
456 + }
457 +
458 + h2 {
459 + margin-bottom: 12px;
460 + }
461 +
462 + .section-intro {
463 + margin-bottom: 20px;
464 + max-width: 820px;
465 + }
466 +
467 + .industry-tags {
468 + max-width: 880px;
469 + margin: 0 auto;
470 + display: flex;
471 + flex-wrap: wrap;
472 + justify-content: center;
473 + gap: 10px;
474 + }
475 +
476 + .industry-tags span {
477 + display: inline-flex;
478 + align-items: center;
479 + padding: 7px 12px;
480 + border: 1px solid fade(@brand, 20%);
481 + border-radius: 999px;
482 + background: #fff;
483 + color: @text;
484 + font-size: 13px;
485 + font-weight: 600;
486 + line-height: 1.2;
487 + box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
488 + }
489 +
490 + .industry-support {
491 + max-width: 820px;
492 + margin: 22px auto 0;
493 + color: @muted;
494 + font-size: 16px;
495 + line-height: 1.6;
496 + }
497 +}
498 +
499 +@media (max-width: 640px) {
500 + .industry-trust-section {
501 + .industry-trust-panel {
502 + padding: 24px 18px;
503 + }
504 +
505 + .industry-tags {
506 + gap: 8px;
507 + }
508 +
509 + .industry-tags span {
510 + font-size: 12px;
511 + padding: 6px 10px;
512 + }
513 + }
514 +}
515 +
515 515  /* ========== Services ========== */
516 516  
517 517  .services {
... ... @@ -742,8 +742,8 @@
742 742  
743 743  /* ========== CTA ========== */
744 744  
745 -#mainContentArea .cta-section {
746 - padding: 44px 0 56px;
746 +.cta-section {
747 + padding: @section-padding;
747 747  
748 748   .contact-inline {
749 749   margin: 0;
... ... @@ -755,70 +755,25 @@
755 755   }
756 756  }
757 757  
758 -#mainContentArea .cta-panel {
759 - position: relative;
760 - overflow: hidden;
761 - max-width: 1040px;
759 +.cta-panel {
760 + max-width: 860px;
762 762   margin: 0 auto;
763 - padding: 48px 40px;
764 - border: 0;
765 - border-radius: 26px;
766 - background:
767 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
768 - linear-gradient(135deg, @text 0%, @text-soft 100%);
769 - color: #fff;
770 - box-shadow: @shadow;
762 + padding: 32px;
763 + border-radius: @radius;
764 + border: 1px solid fade(@brand, 20%);
765 + box-shadow: @shadow-sm;
771 771   text-align: center;
772 -}
773 773  
774 -#mainContentArea .cta-panel::before {
775 - content: "";
776 - position: absolute;
777 - inset: 0;
778 - background:
779 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
780 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
781 - background-size: 48px 48px;
782 - opacity: .4;
783 - pointer-events: none;
784 -}
768 + h2 {
769 + margin-top: 0;
770 + }
785 785  
786 -#mainContentArea .cta-panel h2,
787 -#mainContentArea .cta-panel p,
788 -#mainContentArea .cta-panel .btn {
789 - position: relative;
790 - z-index: 1;
772 + p {
773 + color: @muted;
774 + line-height: 1.55;
775 + }
791 791  }
792 792  
793 -#mainContentArea .cta-panel h2 {
794 - max-width: 760px;
795 - margin: 0 auto 16px;
796 - color: #fff;
797 -}
798 -
799 -#mainContentArea .cta-panel p {
800 - max-width: 760px;
801 - margin: 0 auto 28px;
802 - color: #DBE4EF;
803 - font-size: 16px;
804 - line-height: 1.6;
805 -}
806 -
807 -#mainContentArea .cta-panel .btn-primary {
808 - border-color: #fff;
809 - background: #fff;
810 - color: @text;
811 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
812 -}
813 -
814 -#mainContentArea .cta-panel .btn-primary:hover,
815 -#mainContentArea .cta-panel .btn-primary:focus {
816 - border-color: #fff;
817 - background: #fff;
818 - color: @brand-strong;
819 - text-decoration: none;
820 -}
821 -
822 822  .resource-inline-cta {
823 823   display: flex;
824 824   align-items: center;
... ... @@ -950,14 +950,9 @@
950 950   gap: 14px;
951 951   }
952 952  
953 - #mainContentArea .cta-panel {
954 - padding: 30px 22px;
955 - border-radius: 20px;
909 + .cta-panel {
910 + padding: 24px 20px;
956 956   }
957 -
958 - #mainContentArea .cta-panel .btn-primary {
959 - width: 100%;
960 - }
961 961  }
962 962  
963 963  /* ========== Resource / Article Pages ========== */
... ... @@ -1657,13 +1657,41 @@
1657 1657   background-attachment: fixed;
1658 1658  }
1659 1659  
1660 -#mainContentArea {
1661 - padding: 0;
1662 - overflow-x: hidden;
1611 +/* Let the body background show through the XWiki wrappers.
1612 +#mainContentArea,
1613 +.resource-page,
1614 +.resources-index-page {
1615 + background: transparent !important;
1616 + background-image: none !important;
1663 1663  }
1618 +*/
1619 +/* Remove local decorative backgrounds that compete with the global gradient.
1620 +.hero,
1621 +.hero.hero-centered,
1622 +.trust-strip,
1623 +.industry-trust-section,
1624 +.split-section,
1625 +.resource-strip,
1626 +.homepage-resource-strip,
1627 +.resource-header,
1628 +.product-section-muted,
1629 +.resources-index-page {
1630 + background: transparent !important;
1631 + background-image: none !important;
1632 +}
1633 + */
1634 +/* Keep large panels readable, but remove their inner gradients.
1635 +.industry-trust-section .industry-trust-panel,
1636 +.cta-panel,
1637 +.resource-inline-cta,
1638 +.resource-note,
1639 +.resource-cta {
1640 + background: #fff !important;
1641 + background-image: none !important;
1642 +} */
1664 1664  
1665 -/* ========== Main Page Hero / SaaS Layout ========== */
1666 1666  
1645 +/* ========== Hero ========== */
1667 1667  #mainContentArea .hero.hero-saas {
1668 1668   min-height: auto;
1669 1669   padding: 60px 0 34px;
... ... @@ -1672,21 +1672,18 @@
1672 1672   overflow: hidden;
1673 1673   background: transparent;
1674 1674  }
1675 -
1676 1676  #mainContentArea .hero-layout {
1677 1677   max-width: 1120px;
1678 1678   margin: 0 auto;
1679 1679   display: grid;
1680 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1658 + grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
1681 1681   gap: 56px;
1682 1682   align-items: center;
1683 1683  }
1684 -
1685 -#mainContentArea .hero-copy {
1686 - min-width: 0;
1662 +#mainContentArea .hero-copy,
1663 +#mainContentArea .hero.hero-saas .lead {
1687 1687   text-align: left;
1688 1688  }
1689 -
1690 1690  #mainContentArea .hero.hero-saas h1 {
1691 1691   max-width: 640px;
1692 1692   margin: 0 0 26px;
... ... @@ -1695,20 +1695,16 @@
1695 1695   line-height: 1;
1696 1696   letter-spacing: -3px;
1697 1697  }
1698 -
1699 1699  #mainContentArea .hero.hero-saas h1 span {
1700 1700   color: @brand;
1701 1701  }
1702 -
1703 1703  #mainContentArea .hero.hero-saas .lead {
1704 1704   max-width: 590px;
1705 1705   margin: 0 0 28px;
1706 1706   color: #334155;
1707 - text-align: left;
1708 1708   font-size: 18px;
1709 1709   line-height: 1.6;
1710 1710  }
1711 -
1712 1712  #mainContentArea .hero.hero-saas .benefits {
1713 1713   max-width: 620px;
1714 1714   margin: 0 0 30px;
... ... @@ -1721,7 +1721,6 @@
1721 1721   font-size: 15px;
1722 1722   text-align: left;
1723 1723  }
1724 -
1725 1725  #mainContentArea .hero.hero-saas .benefits li {
1726 1726   display: grid;
1727 1727   grid-template-columns: 18px minmax(0, 1fr);
... ... @@ -1730,7 +1730,6 @@
1730 1730   margin: 0;
1731 1731   line-height: 1.45;
1732 1732  }
1733 -
1734 1734  #mainContentArea .hero.hero-saas .benefits li::before {
1735 1735   content: "✓";
1736 1736   display: block;
... ... @@ -1741,192 +1741,212 @@
1741 1741   text-align: left;
1742 1742   margin: 0;
1743 1743  }
1744 -
1745 -#mainContentArea .hero.hero-saas .hero-actions,
1746 -#mainContentArea .hero.hero-saas #hero-cta {
1714 +#mainContentArea .hero-actions,
1715 +#mainContentArea #hero-cta {
1747 1747   display: flex;
1748 1748   flex-wrap: wrap;
1749 1749   justify-content: flex-start;
1750 1750   gap: 12px;
1751 - margin-top: 0;
1752 1752  }
1753 -
1754 -#mainContentArea .hero-image-wrapper {
1755 - 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;
1756 1756   display: flex;
1757 - justify-content: center;
1758 1758   align-items: center;
1746 + gap: 10px;
1747 + padding: 0 24px;
1748 + border-bottom: 1px solid @line;
1749 + background: fade(#fff, 74%);
1759 1759  }
1760 -
1761 -#mainContentArea .hero-image {
1762 - display: block;
1763 - width: 100%;
1764 - max-width: 620px;
1765 - height: auto;
1766 - border: 0;
1751 +#mainContentArea .hero-dot,
1752 +#mainContentArea .hero-status-dot {
1753 + border-radius: 50%;
1767 1767  }
1768 -
1769 -/* ========== Main Page Hero Responsive ========== */
1770 -
1771 -@media (max-width: 1100px) {
1772 - #mainContentArea .hero-layout {
1773 - max-width: 760px;
1774 - grid-template-columns: 1fr;
1775 - gap: 34px;
1776 - }
1777 -
1778 - #mainContentArea .hero-copy {
1779 - order: 1;
1780 - text-align: center;
1781 - }
1782 -
1783 - #mainContentArea .hero-image-wrapper {
1784 - order: 2;
1785 - }
1786 -
1787 - #mainContentArea .hero.hero-saas h1 {
1788 - margin-left: auto;
1789 - margin-right: auto;
1790 - text-align: center;
1791 - }
1792 -
1793 - #mainContentArea .hero.hero-saas .lead {
1794 - margin-left: auto;
1795 - margin-right: auto;
1796 - text-align: center;
1797 - }
1798 -
1799 - #mainContentArea .hero.hero-saas .benefits {
1800 - margin-left: auto;
1801 - margin-right: auto;
1802 - }
1803 -
1804 - #mainContentArea .hero.hero-saas .hero-actions,
1805 - #mainContentArea .hero.hero-saas #hero-cta {
1806 - justify-content: center;
1807 - }
1808 -
1809 - #mainContentArea .hero-image {
1810 - max-width: 620px;
1811 - }
1755 +#mainContentArea .hero-dot {
1756 + width: 10px;
1757 + height: 10px;
1758 + background: #CBD5E1;
1812 1812  }
1813 -
1814 -@media (max-width: 640px) {
1815 - #mainContentArea .hero.hero-saas {
1816 - padding: 42px 0 28px;
1817 - }
1818 -
1819 - #mainContentArea .hero-layout {
1820 - gap: 28px;
1821 - }
1822 -
1823 - #mainContentArea .hero.hero-saas h1 {
1824 - font-size: 42px;
1825 - letter-spacing: -1.5px;
1826 - }
1827 -
1828 - #mainContentArea .hero.hero-saas .lead {
1829 - font-size: 17px;
1830 - }
1831 -
1832 - #mainContentArea .hero.hero-saas .benefits {
1833 - grid-template-columns: 1fr;
1834 - }
1835 -
1836 - #mainContentArea .hero-image {
1837 - max-width: 100%;
1838 - }
1760 +#mainContentArea .hero-status-dot {
1761 + width: 8px;
1762 + height: 8px;
1763 + background: @brand;
1839 1839  }
1840 -
1841 -/* ========== Accessibility / Contrast Improvements ========== */
1842 -
1843 -/* Make the global background softer and less distracting. */
1844 -body {
1845 - background:
1846 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1847 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1848 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1849 - 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;
1850 1850  }
1851 -
1852 -/* Keep the article area readable while preserving the page background around it. */
1853 -#mainContentArea .resource-layout {
1854 - padding: 28px;
1855 - border: 1px solid fade(@line, 85%);
1856 - border-radius: @radius;
1857 - background: rgba(255, 255, 255, .88);
1858 - box-shadow: @shadow-sm;
1773 +#mainContentArea .hero-browser-body {
1774 + display: grid;
1775 + grid-template-columns: 150px minmax(0, 1fr);
1859 1859  }
1860 -
1861 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1862 -#mainContentArea .widget,
1863 -#mainContentArea .pathway-card,
1864 -#mainContentArea .service-card,
1865 -#mainContentArea .resource-card,
1866 -#mainContentArea .services .service,
1867 -#mainContentArea .product-card,
1868 -#mainContentArea .product-feature,
1869 -#mainContentArea .product-summary-card,
1870 -#mainContentArea .product-info-card {
1871 - background: #fff;
1777 +#mainContentArea .hero-sidebar {
1778 + padding: 24px 18px;
1779 + border-right: 1px solid @line;
1780 + background: #F8FAFC;
1872 1872  }
1873 -
1874 -/* Make notes more readable and visually stronger. */
1875 -#mainContentArea .resource-note {
1876 - border: 1px solid fade(@brand, 18%);
1877 - border-left: 4px solid @brand;
1878 - background: #fff;
1879 - 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;
1880 1880  }
1881 -
1882 -/* Keep the sidebar clearly separated from the background. */
1883 -#mainContentArea .resource-sidebar {
1884 - background: #fff;
1789 +#mainContentArea .hero-nav-item {
1790 + gap: 9px;
1791 + padding: 10px 8px;
1792 + color: #334155;
1793 + font-size: 13px;
1885 1885  }
1886 -
1887 -/* Make CTA panels stand out more clearly. */
1888 -#mainContentArea .resource-cta,
1889 -#mainContentArea .resource-inline-cta {
1890 - background: #fff;
1795 +#mainContentArea .hero-nav-icon {
1796 + width: 20px;
1797 + height: 20px;
1798 + border: 1px solid #CBD5E1;
1799 + border-radius: 5px;
1891 1891  }
1892 -
1893 -/* Improve table readability on long resource pages. */
1894 -#mainContentArea .resource-content table {
1895 - background: #fff;
1801 +#mainContentArea .hero-content-panel {
1802 + padding: 26px;
1896 1896  }
1897 -
1898 -#mainContentArea .resource-content table th {
1804 +#mainContentArea .hero-panel-title,
1805 +#mainContentArea .hero-card-title {
1899 1899   color: @text;
1900 - background: #F8FAFC;
1807 + font-weight: 800;
1901 1901  }
1902 -
1903 -#mainContentArea .resource-content table td {
1904 - color: @text-soft;
1809 +#mainContentArea .hero-panel-title {
1810 + margin-bottom: 18px;
1811 + font-size: 20px;
1905 1905  }
1906 -
1907 -/* Slightly improve paragraph/list contrast in long articles. */
1908 -#mainContentArea .resource-content p,
1909 -#mainContentArea .resource-content li {
1910 - color: @text-soft;
1813 +#mainContentArea .hero-skeleton {
1814 + height: 8px;
1815 + margin-bottom: 10px;
1816 + border-radius: 10px;
1817 + background: #E2E8F0;
1911 1911  }
1912 -
1913 -#mainContentArea .resource-content .resource-note p,
1914 -#mainContentArea .resource-content .resource-checklist li,
1915 -#mainContentArea .resource-content .process-list li {
1916 - color: @muted;
1819 +#mainContentArea .hero-skeleton.short {
1820 + width: 64%;
1917 1917  }
1918 -
1919 -@media (max-width: 900px) {
1920 - #mainContentArea .resource-layout {
1921 - padding: 22px;
1922 - }
1822 +#mainContentArea .hero-dashboard-grid {
1823 + margin-top: 28px;
1824 + display: grid;
1825 + grid-template-columns: repeat(2, minmax(0, 1fr));
1826 + gap: 18px;
1923 1923  }
1924 -
1925 -@media (max-width: 640px) {
1926 - #mainContentArea .resource-layout {
1927 - padding: 18px;
1928 - border-radius: 14px;
1929 - }
1828 +#mainContentArea .hero-mini-card {
1829 + padding: 18px;
1830 + border: 1px solid @line;
1831 + border-radius: 14px;
1832 + background: #fff;
1930 1930  }
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 +}
1931 1931  
1932 -