Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.53
edited by Agnease
on 2026/07/03 15:18
Change comment: There is no comment for this version
To version 25.15
edited by Agnease
on 2026/06/30 11:08
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -2,45 +2,7 @@
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 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>
27 - </div>
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 - />
39 - </div>
40 - </div>
41 - </div>
42 - </section>
43 -#*
44 44   <section class="hero hero-centered" aria-labelledby="hero-title">
45 45   <div class="container hero-inner">
46 46   <h1 id="hero-title">Professional XWiki consulting and engineering</h1>
... ... @@ -64,7 +64,7 @@
64 64   </div>
65 65   </div>
66 66   </section>
67 -*#
29 +
68 68   <section class="trust-strip" aria-label="Agnease experience">
69 69   <div class="container">
70 70   <ul>
... ... @@ -149,9 +149,9 @@
149 149   </div>
150 150   </section>
151 151  
152 - <div class="contrast-band-wrapper">
153 - <section class="contrast-band" aria-labelledby="industry-trust-title">
154 - <div class="contrast-panel">
114 + <section class="industry-trust-section" aria-labelledby="industry-trust-title">
115 + <div class="container">
116 + <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">
124 + <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,14 +170,14 @@
170 170   <span>Regulated environments</span>
171 171   </div>
172 172  
173 - <p class="contrast-support">
135 + <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.
177 177   </p>
178 178   </div>
179 - </section>
180 - </div>
141 + </div>
142 + </section>
181 181  
182 182   <section class="split-section" aria-labelledby="why-title">
183 183   <div class="container">
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
... ... @@ -1,30 +1,19 @@
1 1  /* ========== Agnease Public Website ========== */
2 -/*
3 -@brand: #00937D;
4 -@brand-strong: #007B6A;
5 -@brand-soft: #E7FFF8;
6 -@brand-bg: #F4FCFA;
7 -@text: #2D3A34;
8 -@muted: #5B6B64;
9 -@line: #E4ECE9;
10 -@radius: 16px;
11 -@shadow-sm: 0 6px 20px rgba(0, 0, 0, .06);
12 -@shadow: 0 12px 36px rgba(0, 0, 0, .08);
13 -@maxw: 1140px;
14 -*/
15 -@brand: #00937D;
16 -@brand-strong: #007B6A;
17 -@brand-soft: #E7FFF8;
2 +
3 +
4 +
18 18  @brand-bg: #F7F9FC;
19 19  @text: #07182D;
20 20  @text-soft: #10243D;
21 21  @muted: #64748B;
9 +
22 22  @line: #E6EBF2;
23 23  @radius: 18px;
12 +
24 24  @shadow-sm: 0 18px 45px rgba(15, 23, 42, .06);
25 25  @shadow: 0 30px 80px rgba(15, 23, 42, .12);
26 -@maxw: 1140px;
27 -
15 +@maxw: 1240px;
16 +/* */
28 28  @section-padding: 30px 0;
29 29  @section-padding-mobile: 28px 0;
30 30  
... ... @@ -150,7 +150,7 @@
150 150  
151 151  /* ========== Buttons ========== */
152 152  
153 -/*.btn-primary {
142 +.btn-primary {
154 154   background: @brand;
155 155   border-color: @brand;
156 156   color: #fff;
... ... @@ -162,12 +162,18 @@
162 162   color: #fff;
163 163   }
164 164  }
165 -*/
154 +
166 166  .btn-secondary {
167 - color: @text;
156 + color: @brand;
168 168   background: #fff;
169 - border: 1px solid fade(@text, 35%);
158 + border: 1px solid fade(@brand, 35%);
170 170  
160 + &:hover,
161 + &:focus {
162 + color: @brand-strong;
163 + border-color: @brand;
164 + background: @brand-bg;
165 + }
171 171  }
172 172  
173 173  /* ========== Hero ========== */
... ... @@ -179,6 +179,9 @@
179 179  
180 180   &.hero-centered {
181 181   text-align: center;
177 + background:
178 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
179 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
182 182   display: flex;
183 183   align-items: center;
184 184   justify-content: center;
... ... @@ -247,128 +247,34 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Contrast Band (Full‑Bleed) ========== */
248 +/* ========== Trust Strip ========== */
251 251  
252 -/* Full‑bleed wrapper */
253 -.contrast-band-wrapper {
254 - position: relative;
255 - width: 100vw;
256 - left: 50%;
257 - transform: translateX(-50%);
258 - overflow: visible;
259 -}
250 +.trust-strip {
251 + padding: 18px 0;
252 + border-top: 1px solid @line;
253 + background: #fff;
260 260  
261 -/* Full‑bleed gradient background */
262 -.contrast-band-wrapper::before {
263 - content: "";
264 - position: absolute;
265 - inset: 0;
266 - z-index: -1;
255 + ul {
256 + max-width: 960px;
257 + margin: 0 auto;
258 + padding: 0;
259 + list-style: none;
260 + display: flex;
261 + justify-content: center;
262 + gap: 22px;
263 + flex-wrap: wrap;
264 + color: @muted;
265 + font-size: 13px;
266 + }
267 267  
268 - background:
269 - radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
270 - radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
271 - linear-gradient(135deg, @text 0%, @text-soft 100%);
272 -}
273 -
274 -/* Inner band (content area) */
275 -.contrast-band {
276 - position: relative;
277 - padding: 54px 0;
278 - border-top: 0;
279 - color: #fff;
280 - background: none;
281 - z-index: 0;
282 -}
283 -
284 -/* Grid overlay (clipped to content width) */
285 -.contrast-band::after {
286 - content: "";
287 - position: absolute;
288 - inset: 0;
289 - background:
290 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
291 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
292 - background-size: 52px 52px;
293 - opacity: .38;
294 - pointer-events: none;
295 - z-index: 0;
296 -}
297 -
298 -/* Content above overlay */
299 -.contrast-panel {
300 - position: relative;
301 - z-index: 1;
302 - max-width: 1040px;
303 - margin: 0 auto;
304 - text-align: center;
305 -}
306 -
307 -/* Typography + spacing */
308 -.contrast-band h2 {
309 - max-width: 860px;
310 - margin: 0 auto 12px;
311 - color: #fff;
312 -}
313 -
314 -.contrast-band .section-intro {
315 - max-width: 840px;
316 - margin: 0 auto 26px;
317 - color: #D9E3EE;
318 -}
319 -
320 -/* Tags */
321 -.contrast-tags {
322 - max-width: 940px;
323 - margin: 0 auto;
324 - display: flex;
325 - flex-wrap: wrap;
326 - justify-content: center;
327 - gap: 10px;
328 -}
329 -
330 -.contrast-tags span {
331 - display: inline-flex;
332 - align-items: center;
333 - padding: 8px 13px;
334 - border: 1px solid fade(#fff, 18%);
335 - border-radius: 999px;
336 - background: fade(#fff, 8%);
337 - color: #F8FAFC;
338 - font-size: 13px;
339 - font-weight: 700;
340 - line-height: 1.2;
341 -}
342 -
343 -.contrast-tags span::before {
344 - content: "";
345 - width: 7px;
346 - height: 7px;
347 - margin-right: 8px;
348 - border-radius: 50%;
349 - background: @brand;
350 - box-shadow: 0 0 0 4px fade(@brand, 18%);
351 -}
352 -
353 -/* Support text */
354 -.contrast-support {
355 - max-width: 860px;
356 - margin: 30px auto 0;
357 - color: #D9E3EE;
358 - text-align: center;
359 - font-size: 15px;
360 - line-height: 1.7;
361 -}
362 -
363 -/* Mobile adjustments */
364 -@media (max-width: 640px) {
365 - .contrast-band {
366 - padding: 40px 0;
268 + li {
269 + display: flex;
270 + align-items: center;
271 + gap: 7px;
367 367   }
368 368  
369 - .contrast-tags span {
370 - font-size: 12px;
371 - padding: 8px 11px;
274 + i {
275 + color: @brand;
372 372   }
373 373  }
374 374  
... ... @@ -419,6 +419,7 @@
419 419  .pathway-card,
420 420  .service-card,
421 421  .resource-card {
326 + background: #fff;
422 422   border: 1px solid @line;
423 423   border-radius: @radius;
424 424   box-shadow: @shadow-sm;
... ... @@ -528,6 +528,80 @@
528 528   }
529 529  }
530 530  
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 +
531 531  /* ========== Services ========== */
532 532  
533 533  .services {
... ... @@ -540,6 +540,7 @@
540 540   align-items: flex-start;
541 541   gap: 16px;
542 542   padding: 22px;
522 + background: #fff;
543 543   border: 1px solid @line;
544 544   border-radius: @radius;
545 545   box-shadow: @shadow-sm;
... ... @@ -627,6 +627,7 @@
627 627   position: relative;
628 628   padding: 16px 16px 16px 58px;
629 629   margin-bottom: 12px;
610 + background: #fff;
630 630   border: 1px solid @line;
631 631   border-radius: @radius;
632 632   box-shadow: @shadow-sm;
... ... @@ -758,8 +758,8 @@
758 758  
759 759  /* ========== CTA ========== */
760 760  
761 -#mainContentArea .cta-section {
762 - padding: 44px 0 56px;
742 +.cta-section {
743 + padding: @section-padding;
763 763  
764 764   .contact-inline {
765 765   margin: 0;
... ... @@ -771,70 +771,27 @@
771 771   }
772 772  }
773 773  
774 -#mainContentArea .cta-panel {
775 - position: relative;
776 - overflow: hidden;
777 - max-width: 1040px;
755 +.cta-panel {
756 + max-width: 860px;
778 778   margin: 0 auto;
779 - padding: 48px 40px;
780 - border: 0;
781 - border-radius: 26px;
758 + padding: 32px;
759 + border-radius: @radius;
760 + border: 1px solid fade(@brand, 20%);
782 782   background:
783 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
784 - linear-gradient(135deg, @text 0%, @text-soft 100%);
785 - color: #fff;
786 - box-shadow: @shadow;
762 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
763 + box-shadow: @shadow-sm;
787 787   text-align: center;
788 -}
789 789  
790 -#mainContentArea .cta-panel::before {
791 - content: "";
792 - position: absolute;
793 - inset: 0;
794 - background:
795 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
796 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
797 - background-size: 48px 48px;
798 - opacity: .4;
799 - pointer-events: none;
800 -}
766 + h2 {
767 + margin-top: 0;
768 + }
801 801  
802 -#mainContentArea .cta-panel h2,
803 -#mainContentArea .cta-panel p,
804 -#mainContentArea .cta-panel .btn {
805 - position: relative;
806 - z-index: 1;
770 + p {
771 + color: @muted;
772 + line-height: 1.55;
773 + }
807 807  }
808 808  
809 -#mainContentArea .cta-panel h2 {
810 - max-width: 760px;
811 - margin: 0 auto 16px;
812 - color: #fff;
813 -}
814 -
815 -#mainContentArea .cta-panel p {
816 - max-width: 760px;
817 - margin: 0 auto 28px;
818 - color: #DBE4EF;
819 - font-size: 16px;
820 - line-height: 1.6;
821 -}
822 -
823 -#mainContentArea .cta-panel .btn-primary {
824 - border-color: #fff;
825 - background: #fff;
826 - color: @text;
827 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
828 -}
829 -
830 -#mainContentArea .cta-panel .btn-primary:hover,
831 -#mainContentArea .cta-panel .btn-primary:focus {
832 - border-color: #fff;
833 - background: #fff;
834 - color: @brand-strong;
835 - text-decoration: none;
836 -}
837 -
838 838  .resource-inline-cta {
839 839   display: flex;
840 840   align-items: center;
... ... @@ -966,14 +966,9 @@
966 966   gap: 14px;
967 967   }
968 968  
969 - #mainContentArea .cta-panel {
970 - padding: 30px 22px;
971 - border-radius: 20px;
907 + .cta-panel {
908 + padding: 24px 20px;
972 972   }
973 -
974 - #mainContentArea .cta-panel .btn-primary {
975 - width: 100%;
976 - }
977 977  }
978 978  
979 979  /* ========== Resource / Article Pages ========== */
... ... @@ -985,6 +985,9 @@
985 985  .resource-header {
986 986   padding: @section-padding;
987 987   border-top: none;
921 + background:
922 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
923 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
988 988  
989 989   h1 {
990 990   margin: 0 auto 14px;
... ... @@ -1132,6 +1132,7 @@
1132 1132   border: 1px solid @line;
1133 1133   border-radius: @radius;
1134 1134   padding: 18px;
1071 + background: #fff;
1135 1135   box-shadow: @shadow-sm;
1136 1136  
1137 1137   h4 {
... ... @@ -1230,6 +1230,7 @@
1230 1230  
1231 1231  .product-card {
1232 1232   position: relative;
1170 + background: #fff;
1233 1233   border: 1px solid @line;
1234 1234   border-radius: @radius;
1235 1235   box-shadow: @shadow-sm;
... ... @@ -1379,6 +1379,7 @@
1379 1379  .product-info-card,
1380 1380  .product-feature,
1381 1381  .product-gallery-panel {
1320 + background: #fff;
1382 1382   border: 1px solid @line;
1383 1383   border-radius: @radius;
1384 1384   box-shadow: @shadow-sm;
... ... @@ -1621,6 +1621,7 @@
1621 1621  /* ========== Resources Index ========== */
1622 1622  
1623 1623  .resources-index-page {
1563 + background: #fff;
1624 1624  
1625 1625   .services-grid {
1626 1626   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1656,279 +1656,3 @@
1656 1656   color: @muted;
1657 1657   }
1658 1658  }
1659 -
1660 -/* ========== Global Theme Background ========== */
1661 -
1662 -html,
1663 -body {
1664 - min-height: 100%;
1665 -}
1666 -
1667 -body {
1668 - color: @text;
1669 - background:
1670 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%),
1671 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%),
1672 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1673 - background-attachment: fixed;
1674 -}
1675 -
1676 -/* ========== Main Page Hero / SaaS Layout ========== */
1677 -
1678 -#mainContentArea .hero.hero-saas {
1679 - min-height: auto;
1680 - padding: 60px 0 34px;
1681 - display: flex;
1682 - align-items: center;
1683 - overflow: hidden;
1684 - background: transparent;
1685 -}
1686 -
1687 -#mainContentArea .hero-layout {
1688 - max-width: 1120px;
1689 - margin: 0 auto;
1690 - display: grid;
1691 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1692 - gap: 56px;
1693 - align-items: center;
1694 -}
1695 -
1696 -#mainContentArea .hero-copy {
1697 - min-width: 0;
1698 - text-align: left;
1699 -}
1700 -
1701 -#mainContentArea .hero.hero-saas h1 {
1702 - max-width: 640px;
1703 - margin: 0 0 26px;
1704 - font-size: 60px;
1705 - font-weight: 800;
1706 - line-height: 1;
1707 - letter-spacing: -3px;
1708 -}
1709 -
1710 -#mainContentArea .hero.hero-saas h1 span {
1711 - color: @brand;
1712 -}
1713 -
1714 -#mainContentArea .hero.hero-saas .lead {
1715 - max-width: 590px;
1716 - margin: 0 0 28px;
1717 - color: #334155;
1718 - text-align: left;
1719 - font-size: 18px;
1720 - line-height: 1.6;
1721 -}
1722 -
1723 -#mainContentArea .hero.hero-saas .benefits {
1724 - max-width: 620px;
1725 - margin: 0 0 30px;
1726 - padding: 0;
1727 - display: grid;
1728 - grid-template-columns: repeat(2, minmax(0, 1fr));
1729 - gap: 10px 24px;
1730 - list-style: none;
1731 - color: #475569;
1732 - font-size: 15px;
1733 - text-align: left;
1734 -}
1735 -
1736 -#mainContentArea .hero.hero-saas .benefits li {
1737 - display: grid;
1738 - grid-template-columns: 18px minmax(0, 1fr);
1739 - column-gap: 8px;
1740 - align-items: start;
1741 - margin: 0;
1742 - line-height: 1.45;
1743 -}
1744 -
1745 -#mainContentArea .hero.hero-saas .benefits li::before {
1746 - content: "✓";
1747 - display: block;
1748 - width: 18px;
1749 - color: @brand;
1750 - font-weight: 900;
1751 - line-height: 1.45;
1752 - text-align: left;
1753 - margin: 0;
1754 -}
1755 -
1756 -#mainContentArea .hero.hero-saas .hero-actions,
1757 -#mainContentArea .hero.hero-saas #hero-cta {
1758 - display: flex;
1759 - flex-wrap: wrap;
1760 - justify-content: flex-start;
1761 - gap: 12px;
1762 - margin-top: 0;
1763 -}
1764 -
1765 -#mainContentArea .hero-image-wrapper {
1766 - min-width: 0;
1767 - display: flex;
1768 - justify-content: center;
1769 - align-items: center;
1770 -}
1771 -
1772 -#mainContentArea .hero-image {
1773 - display: block;
1774 - width: 100%;
1775 - max-width: 620px;
1776 - height: auto;
1777 - border: 0;
1778 -}
1779 -
1780 -/* ========== Main Page Hero Responsive ========== */
1781 -
1782 -@media (max-width: 1100px) {
1783 - #mainContentArea .hero-layout {
1784 - max-width: 760px;
1785 - grid-template-columns: 1fr;
1786 - gap: 34px;
1787 - }
1788 -
1789 - #mainContentArea .hero-copy {
1790 - order: 1;
1791 - text-align: center;
1792 - }
1793 -
1794 - #mainContentArea .hero-image-wrapper {
1795 - order: 2;
1796 - }
1797 -
1798 - #mainContentArea .hero.hero-saas h1 {
1799 - margin-left: auto;
1800 - margin-right: auto;
1801 - text-align: center;
1802 - }
1803 -
1804 - #mainContentArea .hero.hero-saas .lead {
1805 - margin-left: auto;
1806 - margin-right: auto;
1807 - text-align: center;
1808 - }
1809 -
1810 - #mainContentArea .hero.hero-saas .benefits {
1811 - margin-left: auto;
1812 - margin-right: auto;
1813 - }
1814 -
1815 - #mainContentArea .hero.hero-saas .hero-actions,
1816 - #mainContentArea .hero.hero-saas #hero-cta {
1817 - justify-content: center;
1818 - }
1819 -
1820 - #mainContentArea .hero-image {
1821 - max-width: 620px;
1822 - }
1823 -}
1824 -
1825 -@media (max-width: 640px) {
1826 - #mainContentArea .hero.hero-saas {
1827 - padding: 42px 0 28px;
1828 - }
1829 -
1830 - #mainContentArea .hero-layout {
1831 - gap: 28px;
1832 - }
1833 -
1834 - #mainContentArea .hero.hero-saas h1 {
1835 - font-size: 42px;
1836 - letter-spacing: -1.5px;
1837 - }
1838 -
1839 - #mainContentArea .hero.hero-saas .lead {
1840 - font-size: 17px;
1841 - }
1842 -
1843 - #mainContentArea .hero.hero-saas .benefits {
1844 - grid-template-columns: 1fr;
1845 - }
1846 -
1847 - #mainContentArea .hero-image {
1848 - max-width: 100%;
1849 - }
1850 -}
1851 -
1852 -/* ========== Accessibility / Contrast Improvements ========== */
1853 -
1854 -/* Keep the article area readable while preserving the page background around it. */
1855 -/*#mainContentArea .resource-layout {
1856 - padding: 28px;
1857 - border: 1px solid fade(@line, 85%);
1858 - border-radius: @radius;
1859 - background: rgba(255, 255, 255, .88);
1860 - box-shadow: @shadow-sm;
1861 -}*/
1862 -
1863 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1864 -#mainContentArea .widget,
1865 -#mainContentArea .pathway-card,
1866 -#mainContentArea .service-card,
1867 -#mainContentArea .resource-card,
1868 -#mainContentArea .services .service,
1869 -#mainContentArea .product-card,
1870 -#mainContentArea .product-feature,
1871 -#mainContentArea .product-summary-card,
1872 -#mainContentArea .product-info-card {
1873 - background: #fff;
1874 -}
1875 -
1876 -/* Make notes more readable and visually stronger. */
1877 -#mainContentArea .resource-note {
1878 - border: 1px solid fade(@brand, 18%);
1879 - border-left: 4px solid @brand;
1880 - background: #fff;
1881 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1882 -}
1883 -
1884 -/* Keep the sidebar clearly separated from the background. */
1885 -#mainContentArea .resource-sidebar {
1886 - background: #fff;
1887 -}
1888 -
1889 -/* Make CTA panels stand out more clearly. */
1890 -#mainContentArea .resource-cta,
1891 -#mainContentArea .resource-inline-cta {
1892 - background: #fff;
1893 -}
1894 -
1895 -/* Improve table readability on long resource pages. */
1896 -#mainContentArea .resource-content table {
1897 - background: #fff;
1898 -}
1899 -
1900 -#mainContentArea .resource-content table th {
1901 - color: @text;
1902 - background: #F8FAFC;
1903 -}
1904 -
1905 -#mainContentArea .resource-content table td {
1906 - color: @text-soft;
1907 -}
1908 -
1909 -/* Slightly improve paragraph/list contrast in long articles. */
1910 -#mainContentArea .resource-content p,
1911 -#mainContentArea .resource-content li {
1912 - color: @text-soft;
1913 -}
1914 -
1915 -#mainContentArea .resource-content .resource-note p,
1916 -#mainContentArea .resource-content .resource-checklist li,
1917 -#mainContentArea .resource-content .process-list li {
1918 - color: @muted;
1919 -}
1920 -
1921 -@media (max-width: 900px) {
1922 - #mainContentArea .resource-layout {
1923 - padding: 22px;
1924 - }
1925 -}
1926 -
1927 -@media (max-width: 640px) {
1928 - #mainContentArea .resource-layout {
1929 - padding: 18px;
1930 - border-radius: 14px;
1931 - }
1932 -}
1933 -
1934 -