Skip to Content

Changes for page Public Web Site

Last modified by Alex Cotiuga on 2026/07/25 17:30
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 30.11
edited by Alex Cotiuga
on 2026/07/25 17:07
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,112 +748,68 @@
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;
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 - }
779 -
780 - h2,
781 - p,
782 - .btn {
871 + .cta-panel {
783 783   position: relative;
784 - z-index: 1;
785 - }
786 -
787 - h2 {
788 - max-width: 760px;
789 - margin: 0 auto 16px;
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%);
790 790   color: #fff;
791 - }
883 + box-shadow: @shadow;
884 + text-align: center;
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 - }
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 + }
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);
898 + h2,
899 + p,
900 + .btn {
901 + position: relative;
902 + z-index: 1;
903 + }
806 806  
807 - &:hover,
808 - &:focus {
809 - border-color: #fff;
810 - background: #fff;
811 - color: @brand-strong;
812 - text-decoration: none;
905 + h2 {
906 + max-width: 760px;
907 + margin: 0 auto 16px;
908 + color: #fff;
813 813   }
814 - }
815 -}
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 849   p {
850 - margin-bottom: 14px;
912 + max-width: 760px;
913 + margin: 0 auto 28px;
914 + color: #DBE4EF;
915 + font-size: 16px;
916 + line-height: 1.6;
851 851   }
852 852  
853 - .btn {
854 - display: inline-block;
855 - margin-left: auto;
856 - margin-right: auto;
919 + .btn-primary {
920 + border-color: #fff;
921 + background: #fff;
922 + color: @text;
923 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
924 +
925 + &:hover,
926 + &:focus {
927 + border-color: #fff;
928 + background: #fff;
929 + color: @brand-strong;
930 + text-decoration: none;
931 + }
857 857   }
858 858   }
859 859  }
... ... @@ -872,8 +872,12 @@
872 872   grid-template-columns: 1fr;
873 873   }
874 874  
875 - .split-copy h2 {
876 - text-align: center;
950 + .split-copy {
951 + padding: 34px 28px;
952 +
953 + h2 {
954 + text-align: center;
955 + }
877 877   }
878 878  }
879 879  
... ... @@ -941,16 +941,34 @@
941 941   padding: 20px;
942 942   }
943 943  
1023 + .split-copy {
1024 + padding: 30px 22px;
1025 + border-radius: 20px;
1026 + }
1027 +
1028 + .process-list li {
1029 + padding: 22px 20px 22px 68px;
1030 +
1031 + &:before {
1032 + left: 20px;
1033 + top: 22px;
1034 + width: 32px;
1035 + height: 32px;
1036 + }
1037 + }
1038 +
944 944   .services .service {
945 945   gap: 14px;
946 946   }
947 947  
948 - .cta-panel {
949 - padding: 30px 22px;
950 - border-radius: 20px;
1043 + .cta-section {
1044 + .cta-panel {
1045 + padding: 30px 22px;
1046 + border-radius: 20px;
951 951  
952 - .btn-primary {
953 - width: 100%;
1048 + .btn-primary {
1049 + width: 100%;
1050 + }
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;
1131 + 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  
1263 +.resource-inline-cta {
1264 + display: flex;
1265 + align-items: center;
1266 + justify-content: space-between;
1267 + gap: 22px;
1268 + margin: 30px 0;
1269 + padding: 20px 22px;
1270 + border: 1px solid @line;
1271 + border-left: 4px solid @brand;
1272 + border-radius: @radius;
1273 + background: #fff;
1274 + box-shadow: @shadow-sm;
1275 +
1276 + p {
1277 + margin: 0;
1278 + color: @muted;
1279 + line-height: 1.55;
1280 + }
1281 +
1282 + strong {
1283 + display: block;
1284 + margin-bottom: 4px;
1285 + color: @text;
1286 + font-size: 17px;
1287 + line-height: 1.3;
1288 + }
1289 +
1290 + .btn {
1291 + flex-shrink: 0;
1292 + white-space: nowrap;
1293 + }
1294 +}
1295 +
1166 1166  .resource-note,
1167 1167  .resource-checklist,
1168 -.resource-cta {
1298 +.resource-cta,
1299 +.resource-inline-cta {
1169 1169   display: flow-root;
1170 1170  }
1171 1171  
... ... @@ -1175,6 +1175,22 @@
1175 1175   }
1176 1176  }
1177 1177  
1309 +@media (max-width: 767px) {
1310 + .resource-inline-cta {
1311 + display: block;
1312 +
1313 + p {
1314 + margin-bottom: 14px;
1315 + }
1316 +
1317 + .btn {
1318 + display: block;
1319 + width: 100%;
1320 + white-space: normal;
1321 + }
1322 + }
1323 +}
1324 +
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,3 @@
1861 1861   }
1862 1862  }
1863 1863  
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 .cta-panel,
1912 -#mainContentArea .resource-cta,
1913 -#mainContentArea .resource-inline-cta {
1914 - background: #fff;
1915 -}
1916 -
1917 -/* Improve table readability on long resource pages. */
1918 -#mainContentArea .resource-content table {
1919 - background: #fff;
1920 -}
1921 -
1922 -#mainContentArea .resource-content table th {
1923 - color: @text;
1924 - background: #F8FAFC;
1925 -}
1926 -
1927 -#mainContentArea .resource-content table td {
1928 - color: @text-soft;
1929 -}
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 -}
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 -}
1942 -
1943 -@media (max-width: 900px) {
1944 - #mainContentArea .resource-layout {
1945 - padding: 22px;
1946 - }
1947 -}
1948 -
1949 -@media (max-width: 640px) {
1950 - #mainContentArea .resource-layout {
1951 - padding: 18px;
1952 - border-radius: 14px;
1953 - }
1954 -}
1955 -
1956 -
XWiki.StyleSheetExtension[2]
cache
... ... @@ -1,0 +1,1 @@
1 +long
code
... ... @@ -1,0 +1,223 @@
1 +#mainContentArea {
2 + .theme-section {
3 + padding-top: 58px;
4 + padding-bottom: 58px;
5 + }
6 +
7 + .theme-section-alt {
8 + background: #F8FAFC;
9 + }
10 +
11 + .theme-heading {
12 + max-width: 900px;
13 + margin: 0 auto 20px;
14 + display: flex;
15 + align-items: center;
16 + justify-content: center;
17 + gap: 16px;
18 +
19 + h2 {
20 + margin: 2px 0 0;
21 + text-align: left;
22 + }
23 + }
24 +
25 + .theme-icon {
26 + width: 54px;
27 + height: 54px;
28 + flex: 0 0 54px;
29 + display: grid;
30 + place-items: center;
31 + border: 1px solid fade(@brand, 18%);
32 + border-radius: 16px;
33 + background: fade(@brand, 9%);
34 + color: @brand;
35 + font-size: 20px;
36 + }
37 +
38 + .theme-icon-dark {
39 + border-color: fade(@text, 20%);
40 + background: @text;
41 + color: #fff;
42 + }
43 +
44 + .theme-type {
45 + display: block;
46 + margin-bottom: 3px;
47 + color: @brand-strong;
48 + font-size: 12px;
49 + font-weight: 800;
50 + letter-spacing: .06em;
51 + text-transform: uppercase;
52 + }
53 +
54 + .theme-description {
55 + max-width: 860px;
56 + margin: 0 auto 30px;
57 + color: @text-soft;
58 + font-size: 16px;
59 + line-height: 1.7;
60 +
61 + p:last-child {
62 + margin-bottom: 0;
63 + }
64 + }
65 +
66 + .theme-gallery {
67 + max-width: 1120px;
68 + margin: 0 auto;
69 + display: grid;
70 + grid-template-columns: repeat(3, minmax(0, 1fr));
71 + gap: 20px;
72 + }
73 +
74 + .theme-gallery-item {
75 + min-width: 0;
76 + margin: 0;
77 + overflow: hidden;
78 + border: 1px solid @line;
79 + border-radius: 18px;
80 + background: #fff;
81 + box-shadow: @shadow-sm;
82 +
83 + a {
84 + display: block;
85 + overflow: hidden;
86 + background: #F8FAFC;
87 + }
88 +
89 + img {
90 + width: 100%;
91 + aspect-ratio: 16 / 10;
92 + display: block;
93 + object-fit: cover;
94 + object-position: top center;
95 + transition: transform .2s ease;
96 + }
97 +
98 + a:hover img,
99 + a:focus img {
100 + transform: scale(1.015);
101 + }
102 +
103 + figcaption {
104 + padding: 12px 14px;
105 + color: @text;
106 + font-size: 14px;
107 + font-weight: 700;
108 + text-align: center;
109 + }
110 + }
111 +
112 + .theme-request-card {
113 + padding: 30px;
114 + border: 1px solid @line;
115 + border-radius: 22px;
116 + background: #fff;
117 + box-shadow: @shadow-sm;
118 + text-align: center;
119 +
120 + h3 {
121 + margin: 0 0 18px;
122 + }
123 + }
124 +
125 + .theme-request-icon {
126 + width: 54px;
127 + height: 54px;
128 + margin: 0 auto 16px;
129 + display: grid;
130 + place-items: center;
131 + border-radius: 16px;
132 + background: fade(@brand, 10%);
133 + color: @brand;
134 + font-size: 21px;
135 + }
136 +
137 + .theme-request-list {
138 + max-width: 270px;
139 + margin: 0 auto 22px;
140 + padding: 0;
141 + list-style: none;
142 + color: @muted;
143 + text-align: left;
144 +
145 + li {
146 + position: relative;
147 + margin: 8px 0;
148 + padding-left: 22px;
149 +
150 + &::before {
151 + content: "\f00c";
152 + position: absolute;
153 + left: 0;
154 + color: @brand;
155 + font-family: FontAwesome;
156 + }
157 + }
158 + }
159 +
160 + .theme-request-note {
161 + margin: 16px 0 0;
162 + color: @muted;
163 + font-size: 13px;
164 + line-height: 1.5;
165 + }
166 +
167 + .industry-trust-section {
168 + .industry-tags a {
169 + display: inline-flex;
170 + align-items: center;
171 + padding: 8px 13px;
172 + border: 1px solid fade(#fff, 18%);
173 + border-radius: 999px;
174 + background: fade(#fff, 7%);
175 + color: #fff;
176 + font-size: 13px;
177 + font-weight: 700;
178 + text-decoration: none;
179 +
180 + &:hover,
181 + &:focus {
182 + border-color: fade(#fff, 35%);
183 + background: fade(#fff, 12%);
184 + color: #fff;
185 + text-decoration: none;
186 + }
187 + }
188 + }
189 +}
190 +
191 +@media (max-width: 980px) {
192 + #mainContentArea {
193 + .theme-gallery {
194 + grid-template-columns: repeat(2, minmax(0, 1fr));
195 + }
196 + }
197 +}
198 +
199 +@media (max-width: 640px) {
200 + #mainContentArea {
201 + .theme-section {
202 + padding-top: 40px;
203 + padding-bottom: 40px;
204 + }
205 +
206 + .theme-heading {
207 + align-items: flex-start;
208 + justify-content: flex-start;
209 +
210 + h2 {
211 + font-size: 26px;
212 + }
213 + }
214 +
215 + .theme-gallery {
216 + grid-template-columns: 1fr;
217 + }
218 +
219 + .theme-request-card {
220 + padding: 24px 20px;
221 + }
222 + }
223 +}
name
... ... @@ -1,0 +1,1 @@
1 +Color Themes