Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.36
edited by Agnease
on 2026/07/03 14:11
Change comment: There is no comment for this version
To version 27.1
edited by Agnease
on 2026/07/01 17:11
Change comment: Rollback to version 25.61

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