Skip to Content

Changes for page Public Web Site

Last modified by Alex Cotiuga on 2026/07/29 05:00
From version 28.15
edited by Alex Cotiuga
on 2026/07/03 12:54
Change comment: There is no comment for this version
To version 31.8
edited by Alex Cotiuga
on 2026/07/29 04:42
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -249,6 +249,7 @@
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>
252 252   </div>
253 253   </div>
254 254   </section>
XWiki.StyleSheetExtension[0]
code
... ... @@ -79,7 +79,7 @@
79 79  
80 80  .section-intro {
81 81   max-width: 760px;
82 - margin: 0 auto 22px;
82 + margin: 10px auto 22px;
83 83   text-align: center;
84 84   color: @muted;
85 85   font-size: 16px;
... ... @@ -576,23 +576,104 @@
576 576  
577 577  .split-grid {
578 578   display: grid;
579 - grid-template-columns: 1.1fr .9fr;
579 + grid-template-columns: .95fr 1.05fr;
580 580   grid-gap: 36px;
581 581   max-width: 1040px;
582 582   margin: 0 auto;
583 - align-items: center;
583 + align-items: stretch;
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 +
587 587   h2 {
588 588   text-align: left;
589 - margin-top: 0;
618 + margin: 0 0 18px;
619 + color: #fff;
620 + font-size: 30px;
621 + line-height: 1.18;
622 + letter-spacing: -.02em;
590 590   }
591 591  
592 592   p {
593 - color: @muted;
594 - line-height: 1.6;
626 + margin: 0 0 18px;
627 + color: #DBE4EF;
628 + line-height: 1.65;
629 +
630 + &:last-child {
631 + margin-bottom: 0;
632 + }
595 595   }
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 + }
596 596  }
597 597  
598 598  .process-list {
... ... @@ -604,38 +604,75 @@
604 604   li {
605 605   counter-increment: process;
606 606   position: relative;
607 - padding: 16px 16px 16px 58px;
608 - margin-bottom: 12px;
688 + min-height: 104px;
689 + padding: 24px 26px 24px 82px;
690 + margin-bottom: 18px;
609 609   border: 1px solid @line;
610 610   border-radius: @radius;
693 + background: #fff;
611 611   box-shadow: @shadow-sm;
612 612   color: @muted;
613 613   line-height: 1.5;
614 614  
698 + &:last-child {
699 + margin-bottom: 0;
700 + }
701 +
615 615   &:before {
616 616   content: counter(process);
617 617   position: absolute;
618 - left: 16px;
619 - top: 16px;
620 - width: 28px;
621 - height: 28px;
705 + left: 26px;
706 + top: 26px;
707 + width: 38px;
708 + height: 38px;
622 622   border-radius: 50%;
623 - background: fade(@brand, 10%);
624 - color: @brand;
710 + background: @brand;
711 + color: #fff;
625 625   display: flex;
626 626   align-items: center;
627 627   justify-content: center;
628 628   font-weight: 800;
716 + box-shadow: 0 0 0 8px fade(@brand, 10%);
629 629   }
630 630  
631 631   strong {
632 632   display: block;
633 633   color: @text;
634 - margin-bottom: 3px;
722 + margin-bottom: 5px;
723 + font-size: 16px;
724 + line-height: 1.3;
635 635   }
636 636   }
637 637  }
638 638  
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 +
639 639  /* ========== Resources ========== */
640 640  
641 641  .resource-strip {
... ... @@ -643,6 +643,7 @@
643 643  }
644 644  
645 645  .resource-card {
764 + background-color: #fff;
646 646   padding: 20px;
647 647  
648 648   h4 {
... ... @@ -738,7 +738,7 @@
738 738  /* ========== CTA ========== */
739 739  
740 740  .cta-section {
741 - padding: 44px 0 56px;
860 + border: none;
742 742  
743 743   .contact-inline {
744 744   margin: 0;
... ... @@ -748,113 +748,72 @@
748 748   color: @brand;
749 749   }
750 750   }
751 -}
752 752  
753 -.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 -
768 - &::before {
769 - content: "";
770 - position: absolute;
771 - inset: 0;
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;
772 772   background:
773 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
774 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
775 - background-size: 48px 48px;
776 - opacity: .4;
777 - pointer-events: none;
778 - }
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;
779 779  
780 - h2,
781 - p,
782 - .btn {
783 - position: relative;
784 - z-index: 1;
785 - }
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 + }
786 786  
787 - h2 {
788 - max-width: 760px;
789 - margin: 0 auto 16px;
790 - color: #fff;
791 - }
898 + > h2,
899 + > p,
900 + > form,
901 + > .hero-actions,
902 + > .cta-actions,
903 + > .reviewNotifications {
904 + position: relative;
905 + z-index: 1;
906 + }
792 792  
793 - p {
794 - max-width: 760px;
795 - margin: 0 auto 28px;
796 - color: #DBE4EF;
797 - font-size: 16px;
798 - line-height: 1.6;
799 - }
908 + > h2 {
909 + max-width: 760px;
910 + margin: 0 auto 16px;
911 + color: #fff;
912 + }
800 800  
801 - .btn-primary {
802 - border-color: #fff;
803 - background: #fff;
804 - color: @text;
805 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
914 + > p {
915 + max-width: 760px;
916 + margin: 0 auto 28px;
917 + color: #DBE4EF;
918 + font-size: 16px;
919 + line-height: 1.6;
920 + }
806 806  
807 - &:hover,
808 - &:focus {
922 + .btn-primary {
809 809   border-color: #fff;
810 810   background: #fff;
811 - color: @brand-strong;
812 - text-decoration: none;
813 - }
814 - }
815 -}
925 + color: @text;
926 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
816 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;
928 + &:hover,
929 + &:focus {
930 + border-color: #fff;
931 + background: #fff;
932 + color: @brand-strong;
933 + text-decoration: none;
934 + }
851 851   }
852 -
853 - .btn {
854 - display: inline-block;
855 - margin-left: auto;
856 - margin-right: auto;
857 - }
858 858   }
859 859  }
860 860  
... ... @@ -872,11 +872,29 @@
872 872   grid-template-columns: 1fr;
873 873   }
874 874  
875 - .split-copy h2 {
876 - text-align: center;
953 + .split-copy {
954 + padding: 34px 28px;
955 +
956 + h2 {
957 + text-align: center;
958 + }
877 877   }
878 878  }
879 879  
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 +
880 880  @media (max-width: 760px) {
881 881   section[id] {
882 882   scroll-margin-top: 132px;
... ... @@ -941,16 +941,34 @@
941 941   padding: 20px;
942 942   }
943 943  
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 +
944 944   .services .service {
945 945   gap: 14px;
946 946   }
947 947  
948 - .cta-panel {
949 - padding: 30px 22px;
950 - border-radius: 20px;
1060 + .cta-section {
1061 + .cta-panel {
1062 + padding: 30px 22px;
1063 + border-radius: 20px;
951 951  
952 - .btn-primary {
953 - width: 100%;
1065 + .btn-primary {
1066 + width: 100%;
1067 + }
954 954   }
955 955   }
956 956  }
... ... @@ -1031,7 +1031,7 @@
1031 1031  
1032 1032  .resource-note {
1033 1033   border-left: 4px solid @brand;
1034 - background: @brand-bg;
1148 + background: #fff;
1035 1035   padding: 16px 18px;
1036 1036   margin: 22px 0;
1037 1037   border-radius: 0 @radius @radius 0;
... ... @@ -1163,9 +1163,43 @@
1163 1163   }
1164 1164  }
1165 1165  
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 +
1166 1166  .resource-note,
1167 1167  .resource-checklist,
1168 -.resource-cta {
1315 +.resource-cta,
1316 +.resource-inline-cta {
1169 1169   display: flow-root;
1170 1170  }
1171 1171  
... ... @@ -1175,6 +1175,22 @@
1175 1175   }
1176 1176  }
1177 1177  
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 +
1178 1178  @media (max-width: 900px) {
1179 1179   .resource-layout {
1180 1180   padding-top: 22px;
... ... @@ -1308,17 +1308,6 @@
1308 1308   }
1309 1309  }
1310 1310  
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 -
1322 1322  @media (max-width: 640px) {
1323 1323   .product-card {
1324 1324   grid-template-columns: 1fr;
... ... @@ -1861,96 +1861,178 @@
1861 1861   }
1862 1862  }
1863 1863  
1864 -/* ========== Accessibility / Contrast Improvements ========== */
2017 +/* ========== Temporary marketing campaign banner ========== */
1865 1865  
1866 -/* Make the global background softer and less distracting. */
1867 -body {
2019 +.public-campaign-banner {
2020 + position: relative;
2021 + margin-top: 34px;
2022 + z-index: 20;
2023 + border: 0;
1868 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;
2025 + radial-gradient(circle at 88% 0%, fade(@brand, 30%) 0%, transparent 32%),
2026 + linear-gradient(110deg, @text 0%, @text-soft 55%, @brand-strong 100%);
2027 + color: #fff;
2028 + box-shadow: 0 10px 26px rgba(7, 24, 45, .12);
1873 1873  }
1874 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;
2031 +.public-campaign-inner {
2032 + min-height: 88px;
2033 + padding-top: 14px;
2034 + padding-bottom: 14px;
2035 + display: flex;
2036 + align-items: center;
2037 + justify-content: space-between;
2038 + gap: 30px;
1882 1882  }
1883 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;
2041 +.public-campaign-copy {
2042 + min-width: 0;
2043 + display: flex;
2044 + align-items: center;
2045 + gap: 18px;
1895 1895  }
1896 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 -}
2048 +.public-campaign-label {
2049 + flex-shrink: 0;
2050 + display: inline-flex;
2051 + align-items: center;
2052 + gap: 7px;
2053 + padding: 6px 10px;
2054 + border: 1px solid fade(#fff, 28%);
2055 + border-radius: 999px;
2056 + background: fade(#fff, 10%);
2057 + color: #fff;
2058 + font-size: 12px;
2059 + line-height: 1.2;
2060 + font-weight: 800;
2061 + text-transform: uppercase;
2062 + letter-spacing: .04em;
1904 1904  
1905 -/* Keep the sidebar clearly separated from the background. */
1906 -#mainContentArea .resource-sidebar {
1907 - background: #fff;
2064 + i {
2065 + color: #fff;
2066 + }
1908 1908  }
1909 1909  
1910 -/* Make CTA panels stand out more clearly. */
1911 -#mainContentArea .cta-panel,
1912 -#mainContentArea .resource-cta,
1913 -#mainContentArea .resource-inline-cta {
1914 - background: #fff;
2069 +.public-campaign-message {
2070 + min-width: 0;
2071 +
2072 + strong {
2073 + display: block;
2074 + margin-bottom: 4px;
2075 + color: #fff;
2076 + font-size: 17px;
2077 + line-height: 1.3;
2078 + }
2079 +
2080 + span {
2081 + display: block;
2082 + max-width: 700px;
2083 + color: #DBE4EF;
2084 + font-size: 14px;
2085 + line-height: 1.45;
2086 + }
1915 1915  }
1916 1916  
1917 -/* Improve table readability on long resource pages. */
1918 -#mainContentArea .resource-content table {
1919 - background: #fff;
2089 +.public-campaign-actions {
2090 + flex-shrink: 0;
2091 + display: flex;
2092 + align-items: center;
2093 + gap: 18px;
1920 1920  }
1921 1921  
1922 -#mainContentArea .resource-content table th {
2096 +.public-campaign-primary {
2097 + white-space: nowrap;
2098 + border-color: #fff;
2099 + background: #fff;
1923 1923   color: @text;
1924 - background: #F8FAFC;
1925 -}
2101 + font-weight: 700;
2102 + box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
1926 1926  
1927 -#mainContentArea .resource-content table td {
1928 - color: @text-soft;
2104 + &:hover,
2105 + &:focus {
2106 + border-color: #fff;
2107 + background: #fff;
2108 + color: @brand-strong;
2109 + text-decoration: none;
2110 + }
1929 1929  }
1930 1930  
1931 -/* Slightly improve paragraph/list contrast in long articles. */
1932 -#mainContentArea .resource-content p,
1933 -#mainContentArea .resource-content li {
1934 - color: @text-soft;
1935 -}
2113 +.public-campaign-link {
2114 + white-space: nowrap;
2115 + color: #fff;
2116 + font-size: 14px;
2117 + font-weight: 700;
2118 + text-decoration: underline;
2119 + text-underline-offset: 3px;
1936 1936  
1937 -#mainContentArea .resource-content .resource-note p,
1938 -#mainContentArea .resource-content .resource-checklist li,
1939 -#mainContentArea .resource-content .process-list li {
1940 - color: @muted;
1941 -}
2121 + i {
2122 + margin-left: 5px;
2123 + }
1942 1942  
1943 -@media (max-width: 900px) {
1944 - #mainContentArea .resource-layout {
1945 - padding: 22px;
2125 + &:hover,
2126 + &:focus {
2127 + color: #fff;
2128 + text-decoration-thickness: 2px;
1946 1946   }
1947 1947  }
1948 1948  
1949 -@media (max-width: 640px) {
1950 - #mainContentArea .resource-layout {
1951 - padding: 18px;
1952 - border-radius: 14px;
2132 +@media (max-width: 980px) {
2133 + .public-campaign-inner {
2134 + align-items: flex-start;
2135 + gap: 18px;
1953 1953   }
2137 +
2138 + .public-campaign-copy {
2139 + align-items: flex-start;
2140 + }
2141 +
2142 + .public-campaign-actions {
2143 + flex-direction: column;
2144 + align-items: flex-end;
2145 + gap: 10px;
2146 + }
1954 1954  }
1955 1955  
2149 +@media (max-width: 760px) {
2150 + .public-campaign-inner {
2151 + display: block;
2152 + padding-top: 18px;
2153 + padding-bottom: 18px;
2154 + text-align: center;
2155 + }
1956 1956  
2157 + .public-campaign-copy {
2158 + display: block;
2159 + }
2160 +
2161 + .public-campaign-label {
2162 + margin-bottom: 12px;
2163 + }
2164 +
2165 + .public-campaign-message {
2166 + strong {
2167 + font-size: 16px;
2168 + }
2169 +
2170 + span {
2171 + margin: 0 auto;
2172 + }
2173 + }
2174 +
2175 + .public-campaign-actions {
2176 + margin-top: 16px;
2177 + display: flex;
2178 + flex-direction: column;
2179 + align-items: stretch;
2180 + gap: 11px;
2181 + }
2182 +
2183 + .public-campaign-primary {
2184 + width: 100%;
2185 + white-space: normal;
2186 + }
2187 +
2188 + .public-campaign-link {
2189 + white-space: normal;
2190 + }
2191 +}