Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/07 14:40
From version 28.19
edited by Agnease
on 2026/07/03 13:03
Change comment: There is no comment for this version
To version 29.6
edited by Agnease
on 2026/07/03 15:27
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="contrast-band" aria-labelledby="industry-trust-title">
152 + <section class="industry-trust-section" aria-labelledby="industry-trust-title">
153 153   <div class="container">
154 - <div class="contrast-panel">
154 + <div class="industry-trust-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="contrast-tags" aria-label="Industries and environments supported">
162 + <div class="industry-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="contrast-support">
173 + <p class="industry-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.
XWiki.StyleSheetExtension[0]
code
... ... @@ -247,104 +247,34 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Contrast Band ========== */
250 +/* ========== Trust Strip ========== */
251 251  
252 -.contrast-band {
253 - position: relative;
254 - overflow: hidden;
255 - padding: 54px 0;
256 - background:
257 - radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
258 - radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
259 - linear-gradient(135deg, @text 0%, @text-soft 100%);
260 - color: #fff;
252 +.trust-strip {
253 + padding: 18px 0;
254 + border-top: 1px solid @line;
261 261  
262 - &::before {
263 - content: "";
264 - position: absolute;
265 - inset: 0;
266 - background:
267 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
268 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
269 - background-size: 52px 52px;
270 - opacity: .38;
271 - pointer-events: none;
272 - }
273 -
274 - .container {
275 - position: relative;
276 - z-index: 1;
277 - }
278 -
279 - .contrast-panel {
280 - max-width: 1040px;
256 + ul {
257 + max-width: 960px;
281 281   margin: 0 auto;
282 - text-align: center;
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;
283 283   }
284 284  
285 - h2 {
286 - max-width: 860px;
287 - margin: 0 auto 12px;
288 - color: #fff;
289 - }
290 -
291 - .section-intro {
292 - max-width: 840px;
293 - margin: 0 auto 26px;
294 - color: #D9E3EE;
295 - }
296 -}
297 -
298 -.contrast-tags {
299 - max-width: 940px;
300 - margin: 0 auto;
301 - display: flex;
302 - flex-wrap: wrap;
303 - justify-content: center;
304 - gap: 10px;
305 -
306 - span {
307 - display: inline-flex;
269 + li {
270 + display: flex;
308 308   align-items: center;
309 - padding: 8px 13px;
310 - border: 1px solid fade(#fff, 18%);
311 - border-radius: 999px;
312 - background: fade(#fff, 8%);
313 - color: #F8FAFC;
314 - font-size: 13px;
315 - font-weight: 700;
316 - line-height: 1.2;
317 -
318 - &::before {
319 - content: "";
320 - width: 7px;
321 - height: 7px;
322 - margin-right: 8px;
323 - border-radius: 50%;
324 - background: @brand;
325 - box-shadow: 0 0 0 4px fade(@brand, 18%);
326 - }
272 + gap: 7px;
327 327   }
328 -}
329 329  
330 -.contrast-support {
331 - max-width: 860px;
332 - margin: 30px auto 0;
333 - color: #D9E3EE;
334 - text-align: center;
335 - font-size: 15px;
336 - line-height: 1.7;
337 -}
338 -
339 -@media (max-width: 640px) {
340 - .contrast-band {
341 - padding: 40px 0;
275 + i {
276 + color: @brand;
342 342   }
343 -
344 - .contrast-tags span {
345 - font-size: 12px;
346 - padding: 8px 11px;
347 - }
348 348  }
349 349  
350 350  /* ========== Reusable Grids ========== */
... ... @@ -646,22 +646,60 @@
646 646  
647 647  .split-grid {
648 648   display: grid;
649 - grid-template-columns: 1.1fr .9fr;
579 + grid-template-columns: .95fr 1.05fr;
650 650   grid-gap: 36px;
651 651   max-width: 1040px;
652 652   margin: 0 auto;
653 - align-items: center;
583 + align-items: stretch;
654 654  }
655 655  
656 656  .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 +
657 657   h2 {
658 658   text-align: left;
659 - margin-top: 0;
618 + margin: 0 0 18px;
619 + color: #fff;
620 + font-size: 30px;
621 + line-height: 1.18;
622 + letter-spacing: -.02em;
660 660   }
661 661  
662 662   p {
663 - color: @muted;
664 - 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 + }
665 665   }
666 666  }
667 667  
... ... @@ -674,34 +674,43 @@
674 674   li {
675 675   counter-increment: process;
676 676   position: relative;
677 - padding: 16px 16px 16px 58px;
678 - margin-bottom: 12px;
645 + min-height: 104px;
646 + padding: 24px 26px 24px 82px;
647 + margin-bottom: 18px;
679 679   border: 1px solid @line;
680 680   border-radius: @radius;
650 + background: #fff;
681 681   box-shadow: @shadow-sm;
682 682   color: @muted;
683 683   line-height: 1.5;
684 684  
655 + &:last-child {
656 + margin-bottom: 0;
657 + }
658 +
685 685   &:before {
686 686   content: counter(process);
687 687   position: absolute;
688 - left: 16px;
689 - top: 16px;
690 - width: 28px;
691 - height: 28px;
662 + left: 26px;
663 + top: 26px;
664 + width: 38px;
665 + height: 38px;
692 692   border-radius: 50%;
693 - background: fade(@brand, 10%);
694 - color: @brand;
667 + background: @brand;
668 + color: #fff;
695 695   display: flex;
696 696   align-items: center;
697 697   justify-content: center;
698 698   font-weight: 800;
673 + box-shadow: 0 0 0 8px fade(@brand, 10%);
699 699   }
700 700  
701 701   strong {
702 702   display: block;
703 703   color: @text;
704 - margin-bottom: 3px;
679 + margin-bottom: 5px;
680 + font-size: 16px;
681 + line-height: 1.3;
705 705   }
706 706   }
707 707  }
... ... @@ -807,7 +807,7 @@
807 807  
808 808  /* ========== CTA ========== */
809 809  
810 -#mainContentArea .cta-section {
787 +.cta-section {
811 811   padding: 44px 0 56px;
812 812  
813 813   .contact-inline {
... ... @@ -818,112 +818,68 @@
818 818   color: @brand;
819 819   }
820 820   }
821 -}
822 822  
823 -#mainContentArea .cta-panel {
824 - position: relative;
825 - overflow: hidden;
826 - max-width: 1040px;
827 - margin: 0 auto;
828 - padding: 48px 40px;
829 - border: 0;
830 - border-radius: 26px;
831 - background:
832 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
833 - linear-gradient(135deg, @text 0%, @text-soft 100%);
834 - color: #fff;
835 - box-shadow: @shadow;
836 - text-align: center;
837 -}
799 + .cta-panel {
800 + position: relative;
801 + overflow: hidden;
802 + max-width: 1040px;
803 + margin: 0 auto;
804 + padding: 48px 40px;
805 + border: 0;
806 + border-radius: 26px;
807 + background:
808 + radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
809 + linear-gradient(135deg, @text 0%, @text-soft 100%);
810 + color: #fff;
811 + box-shadow: @shadow;
812 + text-align: center;
838 838  
839 -#mainContentArea .cta-panel::before {
840 - content: "";
841 - position: absolute;
842 - inset: 0;
843 - background:
844 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
845 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
846 - background-size: 48px 48px;
847 - opacity: .4;
848 - pointer-events: none;
849 -}
814 + &::before {
815 + content: "";
816 + position: absolute;
817 + inset: 0;
818 + background:
819 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
820 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
821 + background-size: 48px 48px;
822 + opacity: .4;
823 + pointer-events: none;
824 + }
850 850  
851 -#mainContentArea .cta-panel h2,
852 -#mainContentArea .cta-panel p,
853 -#mainContentArea .cta-panel .btn {
854 - position: relative;
855 - z-index: 1;
856 -}
826 + h2,
827 + p,
828 + .btn {
829 + position: relative;
830 + z-index: 1;
831 + }
857 857  
858 -#mainContentArea .cta-panel h2 {
859 - max-width: 760px;
860 - margin: 0 auto 16px;
861 - color: #fff;
862 -}
833 + h2 {
834 + max-width: 760px;
835 + margin: 0 auto 16px;
836 + color: #fff;
837 + }
863 863  
864 -#mainContentArea .cta-panel p {
865 - max-width: 760px;
866 - margin: 0 auto 28px;
867 - color: #DBE4EF;
868 - font-size: 16px;
869 - line-height: 1.6;
870 -}
871 -
872 -#mainContentArea .cta-panel .btn-primary {
873 - border-color: #fff;
874 - background: #fff;
875 - color: @text;
876 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
877 -}
878 -
879 -#mainContentArea .cta-panel .btn-primary:hover,
880 -#mainContentArea .cta-panel .btn-primary:focus {
881 - border-color: #fff;
882 - background: #fff;
883 - color: @brand-strong;
884 - text-decoration: none;
885 -}
886 -
887 -.resource-inline-cta {
888 - display: flex;
889 - align-items: center;
890 - justify-content: space-between;
891 - gap: 22px;
892 - margin: 30px 0;
893 - padding: 20px 22px;
894 - border: 1px solid fade(@brand, 22%);
895 - border-radius: @radius;
896 - background: @brand-bg;
897 - box-shadow: @shadow-sm;
898 -
899 - p {
900 - margin: 0;
901 - color: @muted;
902 - line-height: 1.55;
903 - }
904 -
905 - strong {
906 - color: @text;
907 - }
908 -
909 - .btn {
910 - flex-shrink: 0;
911 - }
912 -}
913 -
914 -@media (max-width: 767px) {
915 - .resource-inline-cta {
916 - display: block;
917 - text-align: center;
918 -
919 919   p {
920 - margin-bottom: 14px;
840 + max-width: 760px;
841 + margin: 0 auto 28px;
842 + color: #DBE4EF;
843 + font-size: 16px;
844 + line-height: 1.6;
921 921   }
922 922  
923 - .btn {
924 - display: inline-block;
925 - margin-left: auto;
926 - margin-right: auto;
847 + .btn-primary {
848 + border-color: #fff;
849 + background: #fff;
850 + color: @text;
851 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
852 +
853 + &:hover,
854 + &:focus {
855 + border-color: #fff;
856 + background: #fff;
857 + color: @brand-strong;
858 + text-decoration: none;
859 + }
927 927   }
928 928   }
929 929  }
... ... @@ -942,8 +942,12 @@
942 942   grid-template-columns: 1fr;
943 943   }
944 944  
945 - .split-copy h2 {
946 - text-align: center;
878 + .split-copy {
879 + padding: 34px 28px;
880 +
881 + h2 {
882 + text-align: center;
883 + }
947 947   }
948 948  }
949 949  
... ... @@ -1011,17 +1011,35 @@
1011 1011   padding: 20px;
1012 1012   }
1013 1013  
951 + .split-copy {
952 + padding: 30px 22px;
953 + border-radius: 20px;
954 + }
955 +
956 + .process-list li {
957 + padding: 22px 20px 22px 68px;
958 +
959 + &:before {
960 + left: 20px;
961 + top: 22px;
962 + width: 32px;
963 + height: 32px;
964 + }
965 + }
966 +
1014 1014   .services .service {
1015 1015   gap: 14px;
1016 1016   }
1017 1017  
1018 - #mainContentArea .cta-panel {
1019 - padding: 30px 22px;
1020 - border-radius: 20px;
1021 - }
971 + .cta-section {
972 + .cta-panel {
973 + padding: 30px 22px;
974 + border-radius: 20px;
1022 1022  
1023 - #mainContentArea .cta-panel .btn-primary {
1024 - width: 100%;
976 + .btn-primary {
977 + width: 100%;
978 + }
979 + }
1025 1025   }
1026 1026  }
1027 1027  
... ... @@ -1931,95 +1931,3 @@
1931 1931   }
1932 1932  }
1933 1933  
1934 -/* ========== Accessibility / Contrast Improvements ========== */
1935 -
1936 -/* Make the global background softer and less distracting. */
1937 -body {
1938 - background:
1939 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1940 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1941 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1942 - background-attachment: scroll;
1943 -}
1944 -
1945 -/* Keep the article area readable while preserving the page background around it. */
1946 -#mainContentArea .resource-layout {
1947 - padding: 28px;
1948 - border: 1px solid fade(@line, 85%);
1949 - border-radius: @radius;
1950 - background: rgba(255, 255, 255, .88);
1951 - box-shadow: @shadow-sm;
1952 -}
1953 -
1954 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1955 -#mainContentArea .widget,
1956 -#mainContentArea .pathway-card,
1957 -#mainContentArea .service-card,
1958 -#mainContentArea .resource-card,
1959 -#mainContentArea .services .service,
1960 -#mainContentArea .product-card,
1961 -#mainContentArea .product-feature,
1962 -#mainContentArea .product-summary-card,
1963 -#mainContentArea .product-info-card {
1964 - background: #fff;
1965 -}
1966 -
1967 -/* Make notes more readable and visually stronger. */
1968 -#mainContentArea .resource-note {
1969 - border: 1px solid fade(@brand, 18%);
1970 - border-left: 4px solid @brand;
1971 - background: #fff;
1972 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1973 -}
1974 -
1975 -/* Keep the sidebar clearly separated from the background. */
1976 -#mainContentArea .resource-sidebar {
1977 - background: #fff;
1978 -}
1979 -
1980 -/* Make CTA panels stand out more clearly. */
1981 -#mainContentArea .resource-cta,
1982 -#mainContentArea .resource-inline-cta {
1983 - background: #fff;
1984 -}
1985 -
1986 -/* Improve table readability on long resource pages. */
1987 -#mainContentArea .resource-content table {
1988 - background: #fff;
1989 -}
1990 -
1991 -#mainContentArea .resource-content table th {
1992 - color: @text;
1993 - background: #F8FAFC;
1994 -}
1995 -
1996 -#mainContentArea .resource-content table td {
1997 - color: @text-soft;
1998 -}
1999 -
2000 -/* Slightly improve paragraph/list contrast in long articles. */
2001 -#mainContentArea .resource-content p,
2002 -#mainContentArea .resource-content li {
2003 - color: @text-soft;
2004 -}
2005 -
2006 -#mainContentArea .resource-content .resource-note p,
2007 -#mainContentArea .resource-content .resource-checklist li,
2008 -#mainContentArea .resource-content .process-list li {
2009 - color: @muted;
2010 -}
2011 -
2012 -@media (max-width: 900px) {
2013 - #mainContentArea .resource-layout {
2014 - padding: 22px;
2015 - }
2016 -}
2017 -
2018 -@media (max-width: 640px) {
2019 - #mainContentArea .resource-layout {
2020 - padding: 18px;
2021 - border-radius: 14px;
2022 - }
2023 -}
2024 -
2025 -