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.17
edited by Alex Cotiuga
on 2026/07/03 12:58
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -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;
... ... @@ -576,104 +576,23 @@
576 576  
577 577  .split-grid {
578 578   display: grid;
579 - grid-template-columns: .95fr 1.05fr;
579 + 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;
583 + 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;
589 + 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 - }
593 + color: @muted;
594 + 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;
607 + padding: 16px 16px 16px 58px;
608 + 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;
618 + left: 16px;
619 + top: 16px;
620 + width: 28px;
621 + height: 28px;
709 709   border-radius: 50%;
710 - background: @brand;
711 - color: #fff;
623 + background: fade(@brand, 10%);
624 + 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;
634 + 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;
740 +#mainContentArea .cta-section {
741 + 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   }
751 +}
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;
753 +#mainContentArea .cta-panel {
754 + position: relative;
755 + overflow: hidden;
756 + max-width: 1040px;
757 + margin: 0 auto;
758 + padding: 48px 40px;
759 + border: 0;
760 + border-radius: 26px;
761 + background:
762 + radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
763 + linear-gradient(135deg, @text 0%, @text-soft 100%);
764 + color: #fff;
765 + box-shadow: @shadow;
766 + text-align: center;
767 +}
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 - }
769 +#mainContentArea .cta-panel::before {
770 + content: "";
771 + position: absolute;
772 + inset: 0;
773 + background:
774 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
775 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
776 + background-size: 48px 48px;
777 + opacity: .4;
778 + pointer-events: none;
779 +}
897 897  
898 - > h2,
899 - > p,
900 - > form,
901 - > .hero-actions,
902 - > .cta-actions,
903 - > .reviewNotifications {
904 - position: relative;
905 - z-index: 1;
906 - }
781 +#mainContentArea .cta-panel h2,
782 +#mainContentArea .cta-panel p,
783 +#mainContentArea .cta-panel .btn {
784 + position: relative;
785 + z-index: 1;
786 +}
907 907  
908 - > h2 {
909 - max-width: 760px;
910 - margin: 0 auto 16px;
911 - color: #fff;
912 - }
788 +#mainContentArea .cta-panel h2 {
789 + max-width: 760px;
790 + margin: 0 auto 16px;
791 + color: #fff;
792 +}
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 - }
794 +#mainContentArea .cta-panel p {
795 + max-width: 760px;
796 + margin: 0 auto 28px;
797 + color: #DBE4EF;
798 + font-size: 16px;
799 + line-height: 1.6;
800 +}
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);
802 +#mainContentArea .cta-panel .btn-primary {
803 + border-color: #fff;
804 + background: #fff;
805 + color: @text;
806 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
807 +}
927 927  
928 - &:hover,
929 - &:focus {
930 - border-color: #fff;
931 - background: #fff;
932 - color: @brand-strong;
933 - text-decoration: none;
934 - }
809 +#mainContentArea .cta-panel .btn-primary:hover,
810 +#mainContentArea .cta-panel .btn-primary:focus {
811 + border-color: #fff;
812 + background: #fff;
813 + color: @brand-strong;
814 + text-decoration: none;
815 +}
816 +
817 +.resource-inline-cta {
818 + display: flex;
819 + align-items: center;
820 + justify-content: space-between;
821 + gap: 22px;
822 + margin: 30px 0;
823 + padding: 20px 22px;
824 + border: 1px solid fade(@brand, 22%);
825 + border-radius: @radius;
826 + background: @brand-bg;
827 + box-shadow: @shadow-sm;
828 +
829 + p {
830 + margin: 0;
831 + color: @muted;
832 + line-height: 1.55;
833 + }
834 +
835 + strong {
836 + color: @text;
837 + }
838 +
839 + .btn {
840 + flex-shrink: 0;
841 + }
842 +}
843 +
844 +@media (max-width: 767px) {
845 + .resource-inline-cta {
846 + display: block;
847 + text-align: center;
848 +
849 + p {
850 + margin-bottom: 14px;
935 935   }
852 +
853 + .btn {
854 + display: inline-block;
855 + margin-left: auto;
856 + margin-right: auto;
857 + }
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 - }
875 + .split-copy h2 {
876 + 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;
948 + #mainContentArea .cta-panel {
949 + padding: 30px 22px;
950 + border-radius: 20px;
951 + }
1064 1064  
1065 - .btn-primary {
1066 - width: 100%;
1067 - }
1068 - }
953 + #mainContentArea .cta-panel .btn-primary {
954 + 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;
1034 + 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 {
1168 +.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  
1311 +.product-card-contact {
1312 + color: @brand;
1313 + font-weight: 700;
1314 + text-decoration: underline;
1315 +
1316 + &:hover,
1317 + &:focus {
1318 + color: @brand-strong;
1319 + }
1320 +}
1321 +
1475 1475  @media (max-width: 640px) {
1476 1476   .product-card {
1477 1477   grid-template-columns: 1fr;
... ... @@ -2014,3 +2014,95 @@
2014 2014   }
2015 2015  }
2016 2016  
1864 +/* ========== Accessibility / Contrast Improvements ========== */
1865 +
1866 +/* Make the global background softer and less distracting. */
1867 +body {
1868 + background:
1869 + radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1870 + radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1871 + linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1872 + background-attachment: scroll;
1873 +}
1874 +
1875 +/* Keep the article area readable while preserving the page background around it. */
1876 +#mainContentArea .resource-layout {
1877 + padding: 28px;
1878 + border: 1px solid fade(@line, 85%);
1879 + border-radius: @radius;
1880 + background: rgba(255, 255, 255, .88);
1881 + box-shadow: @shadow-sm;
1882 +}
1883 +
1884 +/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1885 +#mainContentArea .widget,
1886 +#mainContentArea .pathway-card,
1887 +#mainContentArea .service-card,
1888 +#mainContentArea .resource-card,
1889 +#mainContentArea .services .service,
1890 +#mainContentArea .product-card,
1891 +#mainContentArea .product-feature,
1892 +#mainContentArea .product-summary-card,
1893 +#mainContentArea .product-info-card {
1894 + background: #fff;
1895 +}
1896 +
1897 +/* Make notes more readable and visually stronger. */
1898 +#mainContentArea .resource-note {
1899 + border: 1px solid fade(@brand, 18%);
1900 + border-left: 4px solid @brand;
1901 + background: #fff;
1902 + box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1903 +}
1904 +
1905 +/* Keep the sidebar clearly separated from the background. */
1906 +#mainContentArea .resource-sidebar {
1907 + background: #fff;
1908 +}
1909 +
1910 +/* Make CTA panels stand out more clearly. */
1911 +#mainContentArea .resource-cta,
1912 +#mainContentArea .resource-inline-cta {
1913 + background: #fff;
1914 +}
1915 +
1916 +/* Improve table readability on long resource pages. */
1917 +#mainContentArea .resource-content table {
1918 + background: #fff;
1919 +}
1920 +
1921 +#mainContentArea .resource-content table th {
1922 + color: @text;
1923 + background: #F8FAFC;
1924 +}
1925 +
1926 +#mainContentArea .resource-content table td {
1927 + color: @text-soft;
1928 +}
1929 +
1930 +/* Slightly improve paragraph/list contrast in long articles. */
1931 +#mainContentArea .resource-content p,
1932 +#mainContentArea .resource-content li {
1933 + color: @text-soft;
1934 +}
1935 +
1936 +#mainContentArea .resource-content .resource-note p,
1937 +#mainContentArea .resource-content .resource-checklist li,
1938 +#mainContentArea .resource-content .process-list li {
1939 + color: @muted;
1940 +}
1941 +
1942 +@media (max-width: 900px) {
1943 + #mainContentArea .resource-layout {
1944 + padding: 22px;
1945 + }
1946 +}
1947 +
1948 +@media (max-width: 640px) {
1949 + #mainContentArea .resource-layout {
1950 + padding: 18px;
1951 + border-radius: 14px;
1952 + }
1953 +}
1954 +
1955 +