Skip to Content

Changes for page Public Web Site

Last modified by Alex Cotiuga on 2026/07/27 04:27
From version 31.4
edited by Alex Cotiuga
on 2026/07/27 04:27
Change comment: There is no comment for this version
To version 28.33
edited by Alex Cotiuga
on 2026/07/03 14:07
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;
... ... @@ -247,33 +247,112 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Trust Strip ========== */
250 +/* ========== Contrast Band ========== */
251 251  
252 -.trust-strip {
253 - padding: 18px 0;
254 - border-top: 1px solid @line;
252 +.contrast-band {
253 + position: relative;
254 + overflow: hidden;
255 + padding: 54px 0;
256 + 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;
255 255  
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 - }
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 +}
268 268  
269 - li {
270 - display: flex;
271 - align-items: center;
272 - gap: 7px;
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;
273 273   }
274 274  
275 - i {
276 - color: @brand;
353 + .contrast-tags span {
354 + font-size: 12px;
355 + padding: 8px 11px;
277 277   }
278 278  }
279 279  
... ... @@ -433,80 +433,6 @@
433 433   }
434 434  }
435 435  
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 -
510 510  /* ========== Services ========== */
511 511  
512 512  .services {
... ... @@ -576,104 +576,23 @@
576 576  
577 577  .split-grid {
578 578   display: grid;
579 - grid-template-columns: .95fr 1.05fr;
584 + grid-template-columns: 1.1fr .9fr;
580 580   grid-gap: 36px;
581 581   max-width: 1040px;
582 582   margin: 0 auto;
583 - align-items: stretch;
588 + align-items: center;
584 584  }
585 585  
586 586  .split-copy {
587 - position: relative;
588 - overflow: hidden;
589 - min-height: 100%;
590 - padding: 42px 38px;
591 - border-radius: 26px;
592 - background:
593 - radial-gradient(circle at 86% 12%, fade(@brand, 22%) 0%, transparent 32%),
594 - linear-gradient(135deg, @text 0%, @text-soft 100%);
595 - color: #fff;
596 - box-shadow: @shadow;
597 -
598 - &::before {
599 - content: "";
600 - position: absolute;
601 - inset: 0;
602 - background:
603 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
604 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
605 - background-size: 48px 48px;
606 - opacity: .36;
607 - pointer-events: none;
608 - }
609 -
610 - h2,
611 - p {
612 - position: relative;
613 - z-index: 1;
614 - }
615 -
616 616   h2 {
617 617   text-align: left;
618 - margin: 0 0 18px;
619 - color: #fff;
620 - font-size: 30px;
621 - line-height: 1.18;
622 - letter-spacing: -.02em;
594 + margin-top: 0;
623 623   }
624 624  
625 625   p {
626 - margin: 0 0 18px;
627 - color: #DBE4EF;
628 - line-height: 1.65;
629 -
630 - &:last-child {
631 - margin-bottom: 0;
632 - }
598 + color: @muted;
599 + line-height: 1.6;
633 633   }
634 -
635 - h3,
636 - h4 {
637 - position: relative;
638 - z-index: 1;
639 - margin: 0 0 16px;
640 - color: #fff;
641 - font-size: 24px;
642 - line-height: 1.2;
643 - font-weight: 800;
644 - }
645 -
646 - h2 i,
647 - h3 i,
648 - h4 i {
649 - margin-right: 8px;
650 - color: @brand;
651 - }
652 -
653 - ul {
654 - position: relative;
655 - z-index: 1;
656 - margin: 18px 0 0;
657 - padding: 0;
658 - list-style: none;
659 - }
660 -
661 - li {
662 - position: relative;
663 - margin: 10px 0;
664 - padding-left: 28px;
665 - color: #DBE4EF;
666 - line-height: 1.5;
667 -
668 - &::before {
669 - content: "\f00c";
670 - font-family: FontAwesome;
671 - position: absolute;
672 - left: 0;
673 - top: 1px;
674 - color: @brand;
675 - }
676 - }
677 677  }
678 678  
679 679  .process-list {
... ... @@ -685,75 +685,38 @@
685 685   li {
686 686   counter-increment: process;
687 687   position: relative;
688 - min-height: 104px;
689 - padding: 24px 26px 24px 82px;
690 - margin-bottom: 18px;
612 + padding: 16px 16px 16px 58px;
613 + margin-bottom: 12px;
691 691   border: 1px solid @line;
692 692   border-radius: @radius;
693 - background: #fff;
694 694   box-shadow: @shadow-sm;
695 695   color: @muted;
696 696   line-height: 1.5;
697 697  
698 - &:last-child {
699 - margin-bottom: 0;
700 - }
701 -
702 702   &:before {
703 703   content: counter(process);
704 704   position: absolute;
705 - left: 26px;
706 - top: 26px;
707 - width: 38px;
708 - height: 38px;
623 + left: 16px;
624 + top: 16px;
625 + width: 28px;
626 + height: 28px;
709 709   border-radius: 50%;
710 - background: @brand;
711 - color: #fff;
628 + background: fade(@brand, 10%);
629 + color: @brand;
712 712   display: flex;
713 713   align-items: center;
714 714   justify-content: center;
715 715   font-weight: 800;
716 - box-shadow: 0 0 0 8px fade(@brand, 10%);
717 717   }
718 718  
719 719   strong {
720 720   display: block;
721 721   color: @text;
722 - margin-bottom: 5px;
723 - font-size: 16px;
724 - line-height: 1.3;
639 + margin-bottom: 3px;
725 725   }
726 726   }
727 727  }
728 728  
729 -/* ===== Contact page side panel ===== */
730 -
731 -.contact-side-panel {
732 - padding-top: 10px;
733 -}
734 -
735 -.contact-help-panel {
736 - margin-bottom: 18px;
737 - padding: 30px 28px;
738 -}
739 -
740 -.contact-help-panel h2 {
741 - font-size: 24px;
742 -}
743 -
744 -.contact-process-list li {
745 - min-height: auto;
746 -}
747 -
748 -/* CSS for hidden field to identify requests filled by bots. */
749 -.contact-hp-wrapper {
750 - position: absolute;
751 - left: -9999px;
752 - width: 1px;
753 - height: 1px;
754 - overflow: hidden;
755 -}
756 -
757 757  /* ========== Resources ========== */
758 758  
759 759  .resource-strip {
... ... @@ -761,7 +761,6 @@
761 761  }
762 762  
763 763  .resource-card {
764 - background-color: #fff;
765 765   padding: 20px;
766 766  
767 767   h4 {
... ... @@ -856,8 +856,8 @@
856 856  
857 857  /* ========== CTA ========== */
858 858  
859 -.cta-section {
860 - border: none;
745 +#mainContentArea .cta-section {
746 + padding: 44px 0 56px;
861 861  
862 862   .contact-inline {
863 863   margin: 0;
... ... @@ -867,72 +867,113 @@
867 867   color: @brand;
868 868   }
869 869   }
756 +}
870 870  
871 - .cta-panel {
872 - position: relative;
873 - overflow: hidden;
874 - max-width: 1040px;
875 - margin: 0 auto;
876 - padding: 48px 40px;
877 - border: 0;
878 - border-radius: 26px;
879 - background:
880 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
881 - linear-gradient(135deg, @text 0%, @text-soft 100%);
882 - color: #fff;
883 - box-shadow: @shadow;
884 - text-align: center;
758 +#mainContentArea .cta-panel {
759 + position: relative;
760 + overflow: hidden;
761 + max-width: 1040px;
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;
771 + text-align: center;
772 +}
885 885  
886 - &::before {
887 - content: "";
888 - position: absolute;
889 - inset: 0;
890 - background:
891 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
892 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
893 - background-size: 48px 48px;
894 - opacity: .4;
895 - pointer-events: none;
896 - }
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 +}
897 897  
898 - > h2,
899 - > p,
900 - > form,
901 - > .hero-actions,
902 - > .cta-actions,
903 - > .reviewNotifications {
904 - position: relative;
905 - z-index: 1;
906 - }
786 +#mainContentArea .cta-panel h2,
787 +#mainContentArea .cta-panel p,
788 +#mainContentArea .cta-panel .btn {
789 + position: relative;
790 + z-index: 1;
791 +}
907 907  
908 - > h2 {
909 - max-width: 760px;
910 - margin: 0 auto 16px;
911 - color: #fff;
912 - }
793 +#mainContentArea .cta-panel h2 {
794 + max-width: 760px;
795 + margin: 0 auto 16px;
796 + color: #fff;
797 +}
913 913  
914 - > p {
915 - max-width: 760px;
916 - margin: 0 auto 28px;
917 - color: #DBE4EF;
918 - font-size: 16px;
919 - line-height: 1.6;
920 - }
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 +}
921 921  
922 - .btn-primary {
923 - border-color: #fff;
924 - background: #fff;
925 - color: @text;
926 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
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 +}
927 927  
928 - &:hover,
929 - &:focus {
930 - border-color: #fff;
931 - background: #fff;
932 - color: @brand-strong;
933 - text-decoration: none;
934 - }
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 +.resource-inline-cta {
823 + display: flex;
824 + align-items: center;
825 + justify-content: space-between;
826 + gap: 22px;
827 + margin: 30px 0;
828 + padding: 20px 22px;
829 + border: 1px solid fade(@brand, 22%);
830 + border-radius: @radius;
831 + background: @brand-bg;
832 + box-shadow: @shadow-sm;
833 +
834 + p {
835 + margin: 0;
836 + color: @muted;
837 + line-height: 1.55;
838 + }
839 +
840 + strong {
841 + color: @text;
842 + }
843 +
844 + .btn {
845 + flex-shrink: 0;
846 + }
847 +}
848 +
849 +@media (max-width: 767px) {
850 + .resource-inline-cta {
851 + display: block;
852 + text-align: center;
853 +
854 + p {
855 + margin-bottom: 14px;
935 935   }
857 +
858 + .btn {
859 + display: inline-block;
860 + margin-left: auto;
861 + margin-right: auto;
862 + }
936 936   }
937 937  }
938 938  
... ... @@ -950,29 +950,11 @@
950 950   grid-template-columns: 1fr;
951 951   }
952 952  
953 - .split-copy {
954 - padding: 34px 28px;
955 -
956 - h2 {
957 - text-align: center;
958 - }
880 + .split-copy h2 {
881 + text-align: center;
959 959   }
960 960  }
961 961  
962 -/* ========== XWiki notifications inside public CTA panels ========== */
963 -
964 -#mainContentArea {
965 - .cta-panel {
966 - .reviewNotifications {
967 - position: relative;
968 - z-index: 1;
969 - max-width: 920px;
970 - margin: 22px auto 0;
971 - text-align: left;
972 - }
973 - }
974 -}
975 -
976 976  @media (max-width: 760px) {
977 977   section[id] {
978 978   scroll-margin-top: 132px;
... ... @@ -1037,35 +1037,17 @@
1037 1037   padding: 20px;
1038 1038   }
1039 1039  
1040 - .split-copy {
1041 - padding: 30px 22px;
1042 - border-radius: 20px;
1043 - }
1044 -
1045 - .process-list li {
1046 - padding: 22px 20px 22px 68px;
1047 -
1048 - &:before {
1049 - left: 20px;
1050 - top: 22px;
1051 - width: 32px;
1052 - height: 32px;
1053 - }
1054 - }
1055 -
1056 1056   .services .service {
1057 1057   gap: 14px;
1058 1058   }
1059 1059  
1060 - .cta-section {
1061 - .cta-panel {
1062 - padding: 30px 22px;
1063 - border-radius: 20px;
953 + #mainContentArea .cta-panel {
954 + padding: 30px 22px;
955 + border-radius: 20px;
956 + }
1064 1064  
1065 - .btn-primary {
1066 - width: 100%;
1067 - }
1068 - }
958 + #mainContentArea .cta-panel .btn-primary {
959 + width: 100%;
1069 1069   }
1070 1070  }
1071 1071  
... ... @@ -1145,7 +1145,7 @@
1145 1145  
1146 1146  .resource-note {
1147 1147   border-left: 4px solid @brand;
1148 - background: #fff;
1039 + background: @brand-bg;
1149 1149   padding: 16px 18px;
1150 1150   margin: 22px 0;
1151 1151   border-radius: 0 @radius @radius 0;
... ... @@ -1277,43 +1277,9 @@
1277 1277   }
1278 1278  }
1279 1279  
1280 -.resource-inline-cta {
1281 - display: flex;
1282 - align-items: center;
1283 - justify-content: space-between;
1284 - gap: 22px;
1285 - margin: 30px 0;
1286 - padding: 20px 22px;
1287 - border: 1px solid @line;
1288 - border-left: 4px solid @brand;
1289 - border-radius: @radius;
1290 - background: #fff;
1291 - box-shadow: @shadow-sm;
1292 -
1293 - p {
1294 - margin: 0;
1295 - color: @muted;
1296 - line-height: 1.55;
1297 - }
1298 -
1299 - strong {
1300 - display: block;
1301 - margin-bottom: 4px;
1302 - color: @text;
1303 - font-size: 17px;
1304 - line-height: 1.3;
1305 - }
1306 -
1307 - .btn {
1308 - flex-shrink: 0;
1309 - white-space: nowrap;
1310 - }
1311 -}
1312 -
1313 1313  .resource-note,
1314 1314  .resource-checklist,
1315 -.resource-cta,
1316 -.resource-inline-cta {
1173 +.resource-cta {
1317 1317   display: flow-root;
1318 1318  }
1319 1319  
... ... @@ -1323,22 +1323,6 @@
1323 1323   }
1324 1324  }
1325 1325  
1326 -@media (max-width: 767px) {
1327 - .resource-inline-cta {
1328 - display: block;
1329 -
1330 - p {
1331 - margin-bottom: 14px;
1332 - }
1333 -
1334 - .btn {
1335 - display: block;
1336 - width: 100%;
1337 - white-space: normal;
1338 - }
1339 - }
1340 -}
1341 -
1342 1342  @media (max-width: 900px) {
1343 1343   .resource-layout {
1344 1344   padding-top: 22px;
... ... @@ -1472,6 +1472,17 @@
1472 1472   }
1473 1473  }
1474 1474  
1316 +.product-card-contact {
1317 + color: @brand;
1318 + font-weight: 700;
1319 + text-decoration: underline;
1320 +
1321 + &:hover,
1322 + &:focus {
1323 + color: @brand-strong;
1324 + }
1325 +}
1326 +
1475 1475  @media (max-width: 640px) {
1476 1476   .product-card {
1477 1477   grid-template-columns: 1fr;
... ... @@ -1805,38 +1805,10 @@
1805 1805   background-attachment: fixed;
1806 1806  }
1807 1807  
1808 -/* Let the body background show through the XWiki wrappers.
1809 -#mainContentArea,
1810 -.resource-page,
1811 -.resources-index-page {
1812 - background: transparent !important;
1813 - background-image: none !important;
1660 +#mainContentArea {
1661 + padding: 0;
1662 + overflow-x: hidden;
1814 1814  }
1815 -*/
1816 -/* Remove local decorative backgrounds that compete with the global gradient.
1817 -.hero,
1818 -.hero.hero-centered,
1819 -.trust-strip,
1820 -.industry-trust-section,
1821 -.split-section,
1822 -.resource-strip,
1823 -.homepage-resource-strip,
1824 -.resource-header,
1825 -.product-section-muted,
1826 -.resources-index-page {
1827 - background: transparent !important;
1828 - background-image: none !important;
1829 -}
1830 - */
1831 -/* Keep large panels readable, but remove their inner gradients.
1832 -.industry-trust-section .industry-trust-panel,
1833 -.cta-panel,
1834 -.resource-inline-cta,
1835 -.resource-note,
1836 -.resource-cta {
1837 - background: #fff !important;
1838 - background-image: none !important;
1839 -} */
1840 1840  
1841 1841  /* ========== Main Page Hero / SaaS Layout ========== */
1842 1842  
... ... @@ -2014,3 +2014,86 @@
2014 2014   }
2015 2015  }
2016 2016  
1841 +/* ========== Accessibility / Contrast Improvements ========== */
1842 +
1843 +/* Keep the article area readable while preserving the page background around it. */
1844 +/*#mainContentArea .resource-layout {
1845 + padding: 28px;
1846 + border: 1px solid fade(@line, 85%);
1847 + border-radius: @radius;
1848 + background: rgba(255, 255, 255, .88);
1849 + box-shadow: @shadow-sm;
1850 +}*/
1851 +
1852 +/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1853 +#mainContentArea .widget,
1854 +#mainContentArea .pathway-card,
1855 +#mainContentArea .service-card,
1856 +#mainContentArea .resource-card,
1857 +#mainContentArea .services .service,
1858 +#mainContentArea .product-card,
1859 +#mainContentArea .product-feature,
1860 +#mainContentArea .product-summary-card,
1861 +#mainContentArea .product-info-card {
1862 + background: #fff;
1863 +}
1864 +
1865 +/* Make notes more readable and visually stronger. */
1866 +#mainContentArea .resource-note {
1867 + border: 1px solid fade(@brand, 18%);
1868 + border-left: 4px solid @brand;
1869 + background: #fff;
1870 + box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1871 +}
1872 +
1873 +/* Keep the sidebar clearly separated from the background. */
1874 +#mainContentArea .resource-sidebar {
1875 + background: #fff;
1876 +}
1877 +
1878 +/* Make CTA panels stand out more clearly. */
1879 +#mainContentArea .resource-cta,
1880 +#mainContentArea .resource-inline-cta {
1881 + background: #fff;
1882 +}
1883 +
1884 +/* Improve table readability on long resource pages. */
1885 +#mainContentArea .resource-content table {
1886 + background: #fff;
1887 +}
1888 +
1889 +#mainContentArea .resource-content table th {
1890 + color: @text;
1891 + background: #F8FAFC;
1892 +}
1893 +
1894 +#mainContentArea .resource-content table td {
1895 + color: @text-soft;
1896 +}
1897 +
1898 +/* Slightly improve paragraph/list contrast in long articles. */
1899 +#mainContentArea .resource-content p,
1900 +#mainContentArea .resource-content li {
1901 + color: @text-soft;
1902 +}
1903 +
1904 +#mainContentArea .resource-content .resource-note p,
1905 +#mainContentArea .resource-content .resource-checklist li,
1906 +#mainContentArea .resource-content .process-list li {
1907 + color: @muted;
1908 +}
1909 +
1910 +@media (max-width: 900px) {
1911 + #mainContentArea .resource-layout {
1912 + padding: 22px;
1913 + }
1914 +}
1915 +
1916 +@media (max-width: 640px) {
1917 + #mainContentArea .resource-layout {
1918 + padding: 18px;
1919 + border-radius: 14px;
1920 + }
1921 +}
1922 +
1923 +