Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.18
edited by Agnease
on 2026/07/03 13:03
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
... ... @@ -576,22 +576,60 @@
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   }
596 596  }
597 597  
... ... @@ -604,34 +604,43 @@
604 604   li {
605 605   counter-increment: process;
606 606   position: relative;
607 - padding: 16px 16px 16px 58px;
608 - margin-bottom: 12px;
645 + min-height: 104px;
646 + padding: 24px 26px 24px 82px;
647 + margin-bottom: 18px;
609 609   border: 1px solid @line;
610 610   border-radius: @radius;
650 + background: #fff;
611 611   box-shadow: @shadow-sm;
612 612   color: @muted;
613 613   line-height: 1.5;
614 614  
655 + &:last-child {
656 + margin-bottom: 0;
657 + }
658 +
615 615   &:before {
616 616   content: counter(process);
617 617   position: absolute;
618 - left: 16px;
619 - top: 16px;
620 - width: 28px;
621 - height: 28px;
662 + left: 26px;
663 + top: 26px;
664 + width: 38px;
665 + height: 38px;
622 622   border-radius: 50%;
623 - background: fade(@brand, 10%);
624 - color: @brand;
667 + background: @brand;
668 + color: #fff;
625 625   display: flex;
626 626   align-items: center;
627 627   justify-content: center;
628 628   font-weight: 800;
673 + 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;
679 + margin-bottom: 5px;
680 + font-size: 16px;
681 + line-height: 1.3;
635 635   }
636 636   }
637 637  }
... ... @@ -737,7 +737,7 @@
737 737  
738 738  /* ========== CTA ========== */
739 739  
740 -#mainContentArea .cta-section {
787 +.cta-section {
741 741   padding: 44px 0 56px;
742 742  
743 743   .contact-inline {
... ... @@ -748,112 +748,68 @@
748 748   color: @brand;
749 749   }
750 750   }
751 -}
752 752  
753 -#mainContentArea .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 -}
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;
768 768  
769 -#mainContentArea .cta-panel::before {
770 - content: "";
771 - position: absolute;
772 - inset: 0;
773 - background:
774 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
775 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
776 - background-size: 48px 48px;
777 - opacity: .4;
778 - pointer-events: none;
779 -}
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 + }
780 780  
781 -#mainContentArea .cta-panel h2,
782 -#mainContentArea .cta-panel p,
783 -#mainContentArea .cta-panel .btn {
784 - position: relative;
785 - z-index: 1;
786 -}
826 + h2,
827 + p,
828 + .btn {
829 + position: relative;
830 + z-index: 1;
831 + }
787 787  
788 -#mainContentArea .cta-panel h2 {
789 - max-width: 760px;
790 - margin: 0 auto 16px;
791 - color: #fff;
792 -}
833 + h2 {
834 + max-width: 760px;
835 + margin: 0 auto 16px;
836 + color: #fff;
837 + }
793 793  
794 -#mainContentArea .cta-panel p {
795 - max-width: 760px;
796 - margin: 0 auto 28px;
797 - color: #DBE4EF;
798 - font-size: 16px;
799 - line-height: 1.6;
800 -}
801 -
802 -#mainContentArea .cta-panel .btn-primary {
803 - border-color: #fff;
804 - background: #fff;
805 - color: @text;
806 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
807 -}
808 -
809 -#mainContentArea .cta-panel .btn-primary:hover,
810 -#mainContentArea .cta-panel .btn-primary:focus {
811 - border-color: #fff;
812 - background: #fff;
813 - color: @brand-strong;
814 - text-decoration: none;
815 -}
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;
840 + max-width: 760px;
841 + margin: 0 auto 28px;
842 + color: #DBE4EF;
843 + font-size: 16px;
844 + line-height: 1.6;
851 851   }
852 852  
853 - .btn {
854 - display: inline-block;
855 - margin-left: auto;
856 - 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 + }
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;
878 + .split-copy {
879 + padding: 34px 28px;
880 +
881 + h2 {
882 + text-align: center;
883 + }
877 877   }
878 878  }
879 879  
... ... @@ -940,18 +940,36 @@
940 940   .widget {
941 941   padding: 20px;
942 942   }
950 +
951 + .split-copy {
952 + padding: 30px 22px;
953 + border-radius: 20px;
954 + }
943 943  
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 +
944 944   .services .service {
945 945   gap: 14px;
946 946   }
947 947  
948 - #mainContentArea .cta-panel {
949 - padding: 30px 22px;
950 - border-radius: 20px;
951 - }
971 + .cta-section {
972 + .cta-panel {
973 + padding: 30px 22px;
974 + border-radius: 20px;
952 952  
953 - #mainContentArea .cta-panel .btn-primary {
954 - width: 100%;
976 + .btn-primary {
977 + width: 100%;
978 + }
979 + }
955 955   }
956 956  }
957 957  
... ... @@ -1861,95 +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 .resource-cta,
1912 -#mainContentArea .resource-inline-cta {
1913 - background: #fff;
1914 -}
1915 -
1916 -/* Improve table readability on long resource pages. */
1917 -#mainContentArea .resource-content table {
1918 - background: #fff;
1919 -}
1920 -
1921 -#mainContentArea .resource-content table th {
1922 - color: @text;
1923 - background: #F8FAFC;
1924 -}
1925 -
1926 -#mainContentArea .resource-content table td {
1927 - color: @text-soft;
1928 -}
1929 -
1930 -/* Slightly improve paragraph/list contrast in long articles. */
1931 -#mainContentArea .resource-content p,
1932 -#mainContentArea .resource-content li {
1933 - color: @text-soft;
1934 -}
1935 -
1936 -#mainContentArea .resource-content .resource-note p,
1937 -#mainContentArea .resource-content .resource-checklist li,
1938 -#mainContentArea .resource-content .process-list li {
1939 - color: @muted;
1940 -}
1941 -
1942 -@media (max-width: 900px) {
1943 - #mainContentArea .resource-layout {
1944 - padding: 22px;
1945 - }
1946 -}
1947 -
1948 -@media (max-width: 640px) {
1949 - #mainContentArea .resource-layout {
1950 - padding: 18px;
1951 - border-radius: 14px;
1952 - }
1953 -}
1954 -
1955 -