Skip to Content

Changes for page Public Web Site

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