Skip to Content

Changes for page Public Web Site

Last modified by Alex Cotiuga on 2026/07/29 05:00
From version 31.14
edited by Alex Cotiuga
on 2026/07/29 05:00
Change comment: There is no comment for this version
To version 28.35
edited by Alex Cotiuga
on 2026/07/03 14:11
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -149,9 +149,9 @@
149 149   </div>
150 150   </section>
151 151  
152 - <section class="industry-trust-section" aria-labelledby="industry-trust-title">
152 + <section class="contrast-band" aria-labelledby="industry-trust-title">
153 153   <div class="container">
154 - <div class="industry-trust-panel">
154 + <div class="contrast-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="industry-tags" aria-label="Industries and environments supported">
162 + <div class="contrast-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="industry-support">
173 + <p class="contrast-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.
... ... @@ -249,7 +249,6 @@
249 249   A short description is enough to define practical next steps.
250 250   </p>
251 251   <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Contact Agnease</a>
252 - <a class="btn btn-secondary" href="$xwiki.getURL('pricing.WebHome')">View service packages</a>
253 253   </div>
254 254   </div>
255 255   </section>
XWiki.StyleSheetExtension[0]
code
... ... @@ -79,7 +79,7 @@
79 79  
80 80  .section-intro {
81 81   max-width: 760px;
82 - margin: 10px auto 22px;
82 + margin: 0 auto 22px;
83 83   text-align: center;
84 84   color: @muted;
85 85   font-size: 16px;
... ... @@ -117,51 +117,19 @@
117 117  .site-nav {
118 118   display: flex;
119 119   align-items: center;
120 - gap: 8px;
120 + gap: 22px;
121 121   font-size: 15px;
122 122  
123 123   a {
124 - display: inline-flex;
125 - align-items: center;
126 - gap: 5px;
127 - padding: 8px 11px;
128 - border-radius: 9px;
129 129   color: @text;
130 - background: transparent;
131 131   text-decoration: none;
132 132   font-weight: 600;
133 - line-height: 1.2;
134 - transition:
135 - color .18s ease,
136 - background .18s ease,
137 - box-shadow .18s ease,
138 - transform .18s ease;
139 139  
140 140   &:hover,
141 141   &:focus {
142 - color: #fff;
143 - background:
144 - linear-gradient(
145 - 110deg,
146 - @text 0%,
147 - @text-soft 55%,
148 - @brand-strong 100%
149 - );
150 - box-shadow: 0 8px 18px rgba(7, 24, 45, .14);
130 + color: @brand;
151 151   text-decoration: none;
152 - transform: translateY(-1px);
153 153   }
154 -
155 - &:focus-visible {
156 - outline: 2px solid fade(@brand, 45%);
157 - outline-offset: 2px;
158 - }
159 -
160 - i,
161 - .fa,
162 - .caret {
163 - color: inherit;
164 - }
165 165   }
166 166  
167 167   .nav-cta {
... ... @@ -168,20 +168,14 @@
168 168   color: #fff;
169 169   background: @brand;
170 170   border: 1px solid @brand;
171 - border-radius: 9px;
139 + border-radius: 6px;
172 172   padding: 8px 14px;
173 173  
174 174   &:hover,
175 175   &:focus {
176 176   color: #fff;
177 - border-color: transparent;
178 - background:
179 - linear-gradient(
180 - 110deg,
181 - @text 0%,
182 - @text-soft 55%,
183 - @brand-strong 100%
184 - );
145 + background: @brand-strong;
146 + border-color: @brand-strong;
185 185   }
186 186   }
187 187  }
... ... @@ -285,36 +285,127 @@
285 285   margin-top: 22px;
286 286  }
287 287  
288 -/* ========== Trust Strip ========== */
250 +/* ========== Contrast Band ========== */
289 289  
290 -.trust-strip {
291 - padding: 18px 0;
292 - border-top: 1px solid @line;
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;
293 293  
294 - ul {
295 - max-width: 960px;
296 - margin: 0 auto;
297 - padding: 0;
298 - list-style: none;
299 - display: flex;
300 - justify-content: center;
301 - gap: 22px;
302 - flex-wrap: wrap;
303 - color: @muted;
304 - font-size: 13px;
305 - }
259 + /* Remove gradient from here */
260 + background: none;
261 +}
306 306  
307 - li {
308 - display: flex;
309 - align-items: center;
310 - gap: 7px;
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;
311 311   }
312 312  
313 - i {
314 - color: @brand;
364 + .contrast-tags span {
365 + font-size: 12px;
366 + padding: 8px 11px;
315 315   }
316 316  }
317 317  
370 +
318 318  /* ========== Reusable Grids ========== */
319 319  
320 320  .card-grid,
... ... @@ -471,80 +471,6 @@
471 471   }
472 472  }
473 473  
474 -.industry-trust-section {
475 - background:
476 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
477 -
478 - .industry-trust-panel {
479 - max-width: 1040px;
480 - margin: 0 auto;
481 - padding: 30px 28px;
482 - border: 1px solid fade(@brand, 16%);
483 - border-radius: @radius;
484 - background:
485 - radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
486 - box-shadow: @shadow-sm;
487 - text-align: center;
488 - }
489 -
490 - h2 {
491 - margin-bottom: 12px;
492 - }
493 -
494 - .section-intro {
495 - margin-bottom: 20px;
496 - max-width: 820px;
497 - }
498 -
499 - .industry-tags {
500 - max-width: 880px;
501 - margin: 0 auto;
502 - display: flex;
503 - flex-wrap: wrap;
504 - justify-content: center;
505 - gap: 10px;
506 - }
507 -
508 - .industry-tags span {
509 - display: inline-flex;
510 - align-items: center;
511 - padding: 7px 12px;
512 - border: 1px solid fade(@brand, 20%);
513 - border-radius: 999px;
514 - background: #fff;
515 - color: @text;
516 - font-size: 13px;
517 - font-weight: 600;
518 - line-height: 1.2;
519 - box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
520 - }
521 -
522 - .industry-support {
523 - max-width: 820px;
524 - margin: 22px auto 0;
525 - color: @muted;
526 - font-size: 16px;
527 - line-height: 1.6;
528 - }
529 -}
530 -
531 -@media (max-width: 640px) {
532 - .industry-trust-section {
533 - .industry-trust-panel {
534 - padding: 24px 18px;
535 - }
536 -
537 - .industry-tags {
538 - gap: 8px;
539 - }
540 -
541 - .industry-tags span {
542 - font-size: 12px;
543 - padding: 6px 10px;
544 - }
545 - }
546 -}
547 -
548 548  /* ========== Services ========== */
549 549  
550 550  .services {
... ... @@ -614,104 +614,23 @@
614 614  
615 615  .split-grid {
616 616   display: grid;
617 - grid-template-columns: .95fr 1.05fr;
596 + grid-template-columns: 1.1fr .9fr;
618 618   grid-gap: 36px;
619 619   max-width: 1040px;
620 620   margin: 0 auto;
621 - align-items: stretch;
600 + align-items: center;
622 622  }
623 623  
624 624  .split-copy {
625 - position: relative;
626 - overflow: hidden;
627 - min-height: 100%;
628 - padding: 42px 38px;
629 - border-radius: 26px;
630 - background:
631 - radial-gradient(circle at 86% 12%, fade(@brand, 22%) 0%, transparent 32%),
632 - linear-gradient(135deg, @text 0%, @text-soft 100%);
633 - color: #fff;
634 - box-shadow: @shadow;
635 -
636 - &::before {
637 - content: "";
638 - position: absolute;
639 - inset: 0;
640 - background:
641 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
642 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
643 - background-size: 48px 48px;
644 - opacity: .36;
645 - pointer-events: none;
646 - }
647 -
648 - h2,
649 - p {
650 - position: relative;
651 - z-index: 1;
652 - }
653 -
654 654   h2 {
655 655   text-align: left;
656 - margin: 0 0 18px;
657 - color: #fff;
658 - font-size: 30px;
659 - line-height: 1.18;
660 - letter-spacing: -.02em;
606 + margin-top: 0;
661 661   }
662 662  
663 663   p {
664 - margin: 0 0 18px;
665 - color: #DBE4EF;
666 - line-height: 1.65;
667 -
668 - &:last-child {
669 - margin-bottom: 0;
670 - }
610 + color: @muted;
611 + line-height: 1.6;
671 671   }
672 -
673 - h3,
674 - h4 {
675 - position: relative;
676 - z-index: 1;
677 - margin: 0 0 16px;
678 - color: #fff;
679 - font-size: 24px;
680 - line-height: 1.2;
681 - font-weight: 800;
682 - }
683 -
684 - h2 i,
685 - h3 i,
686 - h4 i {
687 - margin-right: 8px;
688 - color: @brand;
689 - }
690 -
691 - ul {
692 - position: relative;
693 - z-index: 1;
694 - margin: 18px 0 0;
695 - padding: 0;
696 - list-style: none;
697 - }
698 -
699 - li {
700 - position: relative;
701 - margin: 10px 0;
702 - padding-left: 28px;
703 - color: #DBE4EF;
704 - line-height: 1.5;
705 -
706 - &::before {
707 - content: "\f00c";
708 - font-family: FontAwesome;
709 - position: absolute;
710 - left: 0;
711 - top: 1px;
712 - color: @brand;
713 - }
714 - }
715 715  }
716 716  
717 717  .process-list {
... ... @@ -723,75 +723,38 @@
723 723   li {
724 724   counter-increment: process;
725 725   position: relative;
726 - min-height: 104px;
727 - padding: 24px 26px 24px 82px;
728 - margin-bottom: 18px;
624 + padding: 16px 16px 16px 58px;
625 + margin-bottom: 12px;
729 729   border: 1px solid @line;
730 730   border-radius: @radius;
731 - background: #fff;
732 732   box-shadow: @shadow-sm;
733 733   color: @muted;
734 734   line-height: 1.5;
735 735  
736 - &:last-child {
737 - margin-bottom: 0;
738 - }
739 -
740 740   &:before {
741 741   content: counter(process);
742 742   position: absolute;
743 - left: 26px;
744 - top: 26px;
745 - width: 38px;
746 - height: 38px;
635 + left: 16px;
636 + top: 16px;
637 + width: 28px;
638 + height: 28px;
747 747   border-radius: 50%;
748 - background: @brand;
749 - color: #fff;
640 + background: fade(@brand, 10%);
641 + color: @brand;
750 750   display: flex;
751 751   align-items: center;
752 752   justify-content: center;
753 753   font-weight: 800;
754 - box-shadow: 0 0 0 8px fade(@brand, 10%);
755 755   }
756 756  
757 757   strong {
758 758   display: block;
759 759   color: @text;
760 - margin-bottom: 5px;
761 - font-size: 16px;
762 - line-height: 1.3;
651 + margin-bottom: 3px;
763 763   }
764 764   }
765 765  }
766 766  
767 -/* ===== Contact page side panel ===== */
768 -
769 -.contact-side-panel {
770 - padding-top: 10px;
771 -}
772 -
773 -.contact-help-panel {
774 - margin-bottom: 18px;
775 - padding: 30px 28px;
776 -}
777 -
778 -.contact-help-panel h2 {
779 - font-size: 24px;
780 -}
781 -
782 -.contact-process-list li {
783 - min-height: auto;
784 -}
785 -
786 -/* CSS for hidden field to identify requests filled by bots. */
787 -.contact-hp-wrapper {
788 - position: absolute;
789 - left: -9999px;
790 - width: 1px;
791 - height: 1px;
792 - overflow: hidden;
793 -}
794 -
795 795  /* ========== Resources ========== */
796 796  
797 797  .resource-strip {
... ... @@ -799,7 +799,6 @@
799 799  }
800 800  
801 801  .resource-card {
802 - background-color: #fff;
803 803   padding: 20px;
804 804  
805 805   h4 {
... ... @@ -894,8 +894,8 @@
894 894  
895 895  /* ========== CTA ========== */
896 896  
897 -.cta-section {
898 - border: none;
757 +#mainContentArea .cta-section {
758 + padding: 44px 0 56px;
899 899  
900 900   .contact-inline {
901 901   margin: 0;
... ... @@ -905,72 +905,113 @@
905 905   color: @brand;
906 906   }
907 907   }
768 +}
908 908  
909 - .cta-panel {
910 - position: relative;
911 - overflow: hidden;
912 - max-width: 1040px;
913 - margin: 0 auto;
914 - padding: 48px 40px;
915 - border: 0;
916 - border-radius: 26px;
917 - background:
918 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
919 - linear-gradient(135deg, @text 0%, @text-soft 100%);
920 - color: #fff;
921 - box-shadow: @shadow;
922 - text-align: center;
770 +#mainContentArea .cta-panel {
771 + position: relative;
772 + overflow: hidden;
773 + max-width: 1040px;
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;
783 + text-align: center;
784 +}
923 923  
924 - &::before {
925 - content: "";
926 - position: absolute;
927 - inset: 0;
928 - background:
929 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
930 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
931 - background-size: 48px 48px;
932 - opacity: .4;
933 - pointer-events: none;
934 - }
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 +}
935 935  
936 - > h2,
937 - > p,
938 - > form,
939 - > .hero-actions,
940 - > .cta-actions,
941 - > .reviewNotifications {
942 - position: relative;
943 - z-index: 1;
944 - }
798 +#mainContentArea .cta-panel h2,
799 +#mainContentArea .cta-panel p,
800 +#mainContentArea .cta-panel .btn {
801 + position: relative;
802 + z-index: 1;
803 +}
945 945  
946 - > h2 {
947 - max-width: 760px;
948 - margin: 0 auto 16px;
949 - color: #fff;
950 - }
805 +#mainContentArea .cta-panel h2 {
806 + max-width: 760px;
807 + margin: 0 auto 16px;
808 + color: #fff;
809 +}
951 951  
952 - > p {
953 - max-width: 760px;
954 - margin: 0 auto 28px;
955 - color: #DBE4EF;
956 - font-size: 16px;
957 - line-height: 1.6;
958 - }
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 +}
959 959  
960 - .btn-primary {
961 - border-color: #fff;
962 - background: #fff;
963 - color: @text;
964 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
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 +}
965 965  
966 - &:hover,
967 - &:focus {
968 - border-color: #fff;
969 - background: #fff;
970 - color: @brand-strong;
971 - text-decoration: none;
972 - }
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 +.resource-inline-cta {
835 + display: flex;
836 + align-items: center;
837 + justify-content: space-between;
838 + gap: 22px;
839 + margin: 30px 0;
840 + padding: 20px 22px;
841 + border: 1px solid fade(@brand, 22%);
842 + border-radius: @radius;
843 + background: @brand-bg;
844 + box-shadow: @shadow-sm;
845 +
846 + p {
847 + margin: 0;
848 + color: @muted;
849 + line-height: 1.55;
850 + }
851 +
852 + strong {
853 + color: @text;
854 + }
855 +
856 + .btn {
857 + flex-shrink: 0;
858 + }
859 +}
860 +
861 +@media (max-width: 767px) {
862 + .resource-inline-cta {
863 + display: block;
864 + text-align: center;
865 +
866 + p {
867 + margin-bottom: 14px;
973 973   }
869 +
870 + .btn {
871 + display: inline-block;
872 + margin-left: auto;
873 + margin-right: auto;
874 + }
974 974   }
975 975  }
976 976  
... ... @@ -988,29 +988,11 @@
988 988   grid-template-columns: 1fr;
989 989   }
990 990  
991 - .split-copy {
992 - padding: 34px 28px;
993 -
994 - h2 {
995 - text-align: center;
996 - }
892 + .split-copy h2 {
893 + text-align: center;
997 997   }
998 998  }
999 999  
1000 -/* ========== XWiki notifications inside public CTA panels ========== */
1001 -
1002 -#mainContentArea {
1003 - .cta-panel {
1004 - .reviewNotifications {
1005 - position: relative;
1006 - z-index: 1;
1007 - max-width: 920px;
1008 - margin: 22px auto 0;
1009 - text-align: left;
1010 - }
1011 - }
1012 -}
1013 -
1014 1014  @media (max-width: 760px) {
1015 1015   section[id] {
1016 1016   scroll-margin-top: 132px;
... ... @@ -1075,35 +1075,17 @@
1075 1075   padding: 20px;
1076 1076   }
1077 1077  
1078 - .split-copy {
1079 - padding: 30px 22px;
1080 - border-radius: 20px;
1081 - }
1082 -
1083 - .process-list li {
1084 - padding: 22px 20px 22px 68px;
1085 -
1086 - &:before {
1087 - left: 20px;
1088 - top: 22px;
1089 - width: 32px;
1090 - height: 32px;
1091 - }
1092 - }
1093 -
1094 1094   .services .service {
1095 1095   gap: 14px;
1096 1096   }
1097 1097  
1098 - .cta-section {
1099 - .cta-panel {
1100 - padding: 30px 22px;
1101 - border-radius: 20px;
965 + #mainContentArea .cta-panel {
966 + padding: 30px 22px;
967 + border-radius: 20px;
968 + }
1102 1102  
1103 - .btn-primary {
1104 - width: 100%;
1105 - }
1106 - }
970 + #mainContentArea .cta-panel .btn-primary {
971 + width: 100%;
1107 1107   }
1108 1108  }
1109 1109  
... ... @@ -1183,7 +1183,7 @@
1183 1183  
1184 1184  .resource-note {
1185 1185   border-left: 4px solid @brand;
1186 - background: #fff;
1051 + background: @brand-bg;
1187 1187   padding: 16px 18px;
1188 1188   margin: 22px 0;
1189 1189   border-radius: 0 @radius @radius 0;
... ... @@ -1315,43 +1315,9 @@
1315 1315   }
1316 1316  }
1317 1317  
1318 -.resource-inline-cta {
1319 - display: flex;
1320 - align-items: center;
1321 - justify-content: space-between;
1322 - gap: 22px;
1323 - margin: 30px 0;
1324 - padding: 20px 22px;
1325 - border: 1px solid @line;
1326 - border-left: 4px solid @brand;
1327 - border-radius: @radius;
1328 - background: #fff;
1329 - box-shadow: @shadow-sm;
1330 -
1331 - p {
1332 - margin: 0;
1333 - color: @muted;
1334 - line-height: 1.55;
1335 - }
1336 -
1337 - strong {
1338 - display: block;
1339 - margin-bottom: 4px;
1340 - color: @text;
1341 - font-size: 17px;
1342 - line-height: 1.3;
1343 - }
1344 -
1345 - .btn {
1346 - flex-shrink: 0;
1347 - white-space: nowrap;
1348 - }
1349 -}
1350 -
1351 1351  .resource-note,
1352 1352  .resource-checklist,
1353 -.resource-cta,
1354 -.resource-inline-cta {
1185 +.resource-cta {
1355 1355   display: flow-root;
1356 1356  }
1357 1357  
... ... @@ -1361,22 +1361,6 @@
1361 1361   }
1362 1362  }
1363 1363  
1364 -@media (max-width: 767px) {
1365 - .resource-inline-cta {
1366 - display: block;
1367 -
1368 - p {
1369 - margin-bottom: 14px;
1370 - }
1371 -
1372 - .btn {
1373 - display: block;
1374 - width: 100%;
1375 - white-space: normal;
1376 - }
1377 - }
1378 -}
1379 -
1380 1380  @media (max-width: 900px) {
1381 1381   .resource-layout {
1382 1382   padding-top: 22px;
... ... @@ -1510,6 +1510,17 @@
1510 1510   }
1511 1511  }
1512 1512  
1328 +.product-card-contact {
1329 + color: @brand;
1330 + font-weight: 700;
1331 + text-decoration: underline;
1332 +
1333 + &:hover,
1334 + &:focus {
1335 + color: @brand-strong;
1336 + }
1337 +}
1338 +
1513 1513  @media (max-width: 640px) {
1514 1514   .product-card {
1515 1515   grid-template-columns: 1fr;
... ... @@ -1843,38 +1843,10 @@
1843 1843   background-attachment: fixed;
1844 1844  }
1845 1845  
1846 -/* Let the body background show through the XWiki wrappers.
1847 -#mainContentArea,
1848 -.resource-page,
1849 -.resources-index-page {
1850 - background: transparent !important;
1851 - background-image: none !important;
1672 +#mainContentArea {
1673 + padding: 0;
1674 + overflow-x: hidden;
1852 1852  }
1853 -*/
1854 -/* Remove local decorative backgrounds that compete with the global gradient.
1855 -.hero,
1856 -.hero.hero-centered,
1857 -.trust-strip,
1858 -.industry-trust-section,
1859 -.split-section,
1860 -.resource-strip,
1861 -.homepage-resource-strip,
1862 -.resource-header,
1863 -.product-section-muted,
1864 -.resources-index-page {
1865 - background: transparent !important;
1866 - background-image: none !important;
1867 -}
1868 - */
1869 -/* Keep large panels readable, but remove their inner gradients.
1870 -.industry-trust-section .industry-trust-panel,
1871 -.cta-panel,
1872 -.resource-inline-cta,
1873 -.resource-note,
1874 -.resource-cta {
1875 - background: #fff !important;
1876 - background-image: none !important;
1877 -} */
1878 1878  
1879 1879  /* ========== Main Page Hero / SaaS Layout ========== */
1880 1880  
... ... @@ -2052,177 +2052,86 @@
2052 2052   }
2053 2053  }
2054 2054  
2055 -/* ========== Temporary marketing campaign banner ========== */
1853 +/* ========== Accessibility / Contrast Improvements ========== */
2056 2056  
2057 -.public-campaign-banner {
2058 - position: relative;
2059 - margin-top: 30px;
2060 - z-index: 20;
2061 - border: 0;
2062 - background:
2063 - radial-gradient(circle at 88% 0%, fade(@brand, 30%) 0%, transparent 32%),
2064 - linear-gradient(110deg, @text 0%, @text-soft 55%, @brand-strong 100%);
2065 - color: #fff;
2066 - border-radius: 14px;
2067 - box-shadow: 0 10px 26px rgba(7, 24, 45, .10);
2068 -}
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 +}*/
2069 2069  
2070 -.public-campaign-inner {
2071 - min-height: 88px;
2072 - padding-top: 14px;
2073 - padding-bottom: 14px;
2074 - display: flex;
2075 - align-items: center;
2076 - justify-content: space-between;
2077 - gap: 30px;
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;
2078 2078  }
2079 2079  
2080 -.public-campaign-copy {
2081 - min-width: 0;
2082 - display: flex;
2083 - align-items: center;
2084 - gap: 18px;
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);
2085 2085  }
2086 2086  
2087 -.public-campaign-label {
2088 - flex-shrink: 0;
2089 - display: inline-flex;
2090 - align-items: center;
2091 - gap: 7px;
2092 - padding: 7px 11px;
2093 - border: 1px solid fade(#fff, 32%);
2094 - border-radius: 999px;
2095 - background: fade(#fff, 12%);
2096 - color: #fff;
2097 - font-size: 12px;
2098 - line-height: 1.2;
2099 - font-weight: 800;
2100 - text-transform: uppercase;
2101 - letter-spacing: .05em;
1885 +/* Keep the sidebar clearly separated from the background. */
1886 +#mainContentArea .resource-sidebar {
1887 + background: #fff;
2102 2102  }
2103 2103  
2104 -.public-campaign-message {
2105 - min-width: 0;
2106 - flex: 1;
2107 -
2108 - strong {
2109 - display: block;
2110 - margin-bottom: 5px;
2111 - color: #fff;
2112 - font-size: 18px;
2113 - line-height: 1.25;
2114 - font-weight: 800;
2115 - letter-spacing: -.01em;
2116 - }
2117 -
2118 - span {
2119 - display: block;
2120 - max-width: 660px;
2121 - color: #DBE4EF;
2122 - font-size: 14px;
2123 - line-height: 1.45;
2124 - }
1890 +/* Make CTA panels stand out more clearly. */
1891 +#mainContentArea .resource-cta,
1892 +#mainContentArea .resource-inline-cta {
1893 + background: #fff;
2125 2125  }
2126 2126  
2127 -.public-campaign-actions {
2128 - flex-shrink: 0;
2129 - display: flex;
2130 - align-items: center;
2131 - gap: 18px;
1896 +/* Improve table readability on long resource pages. */
1897 +#mainContentArea .resource-content table {
1898 + background: #fff;
2132 2132  }
2133 2133  
2134 -.public-campaign-primary {
2135 - white-space: nowrap;
2136 - padding: 9px 16px;
2137 - border-color: #fff;
2138 - border-radius: 7px;
2139 - background: #fff;
1901 +#mainContentArea .resource-content table th {
2140 2140   color: @text;
2141 - font-weight: 800;
2142 - box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
1903 + background: #F8FAFC;
2143 2143  }
2144 2144  
2145 -.public-campaign-link {
2146 - white-space: nowrap;
2147 - color: #fff;
2148 - font-size: 14px;
2149 - font-weight: 700;
2150 - text-decoration: none;
1906 +#mainContentArea .resource-content table td {
1907 + color: @text-soft;
1908 +}
2151 2151  
2152 - i {
2153 - margin-left: 6px;
2154 - transition: transform .18s ease;
2155 - }
1910 +/* Slightly improve paragraph/list contrast in long articles. */
1911 +#mainContentArea .resource-content p,
1912 +#mainContentArea .resource-content li {
1913 + color: @text-soft;
1914 +}
2156 2156  
2157 - &:hover,
2158 - &:focus {
2159 - color: #fff;
2160 - text-decoration: underline;
2161 - text-underline-offset: 3px;
1916 +#mainContentArea .resource-content .resource-note p,
1917 +#mainContentArea .resource-content .resource-checklist li,
1918 +#mainContentArea .resource-content .process-list li {
1919 + color: @muted;
1920 +}
2162 2162  
2163 - i {
2164 - transform: translateX(3px);
2165 - }
1922 +@media (max-width: 900px) {
1923 + #mainContentArea .resource-layout {
1924 + padding: 22px;
2166 2166   }
2167 2167  }
2168 2168  
2169 -@media (max-width: 980px) {
2170 - .public-campaign-inner {
2171 - align-items: flex-start;
2172 - gap: 18px;
1928 +@media (max-width: 640px) {
1929 + #mainContentArea .resource-layout {
1930 + padding: 18px;
1931 + border-radius: 14px;
2173 2173   }
2174 -
2175 - .public-campaign-copy {
2176 - align-items: flex-start;
2177 - }
2178 -
2179 - .public-campaign-actions {
2180 - flex-direction: column;
2181 - align-items: flex-end;
2182 - gap: 10px;
2183 - }
2184 2184  }
2185 2185  
2186 -@media (max-width: 760px) {
2187 - .public-campaign-inner {
2188 - display: block;
2189 - padding-top: 18px;
2190 - padding-bottom: 18px;
2191 - text-align: center;
2192 - }
2193 2193  
2194 - .public-campaign-copy {
2195 - display: block;
2196 - }
2197 -
2198 - .public-campaign-label {
2199 - margin-bottom: 12px;
2200 - }
2201 -
2202 - .public-campaign-message {
2203 - strong {
2204 - font-size: 16px;
2205 - }
2206 -
2207 - span {
2208 - margin: 0 auto;
2209 - }
2210 - }
2211 -
2212 - .public-campaign-actions {
2213 - margin-top: 16px;
2214 - display: flex;
2215 - flex-direction: column;
2216 - align-items: stretch;
2217 - gap: 11px;
2218 - }
2219 -
2220 - .public-campaign-primary {
2221 - width: 100%;
2222 - white-space: normal;
2223 - }
2224 -
2225 - .public-campaign-link {
2226 - white-space: normal;
2227 - }
2228 -}