Skip to Content

Changes for page Public Web Site

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