Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.16
edited by Agnease
on 2026/07/03 12:57
Change comment: There is no comment for this version
To version 29.3
edited by Agnease
on 2026/07/03 15:23
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[0]
code
... ... @@ -737,7 +737,7 @@
737 737  
738 738  /* ========== CTA ========== */
739 739  
740 -#mainContentArea .cta-section {
740 +.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 -}
752 + .cta-panel {
753 + position: relative;
754 + overflow: hidden;
755 + max-width: 1040px;
756 + margin: 0 auto;
757 + padding: 48px 40px;
758 + border: 0;
759 + border-radius: 26px;
760 + background:
761 + radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
762 + linear-gradient(135deg, @text 0%, @text-soft 100%);
763 + color: #fff;
764 + box-shadow: @shadow;
765 + 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 -}
767 + &::before {
768 + content: "";
769 + position: absolute;
770 + inset: 0;
771 + background:
772 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
773 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
774 + background-size: 48px 48px;
775 + opacity: .4;
776 + pointer-events: none;
777 + }
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 -}
779 + h2,
780 + p,
781 + .btn {
782 + position: relative;
783 + z-index: 1;
784 + }
787 787  
788 -#mainContentArea .cta-panel h2 {
789 - max-width: 760px;
790 - margin: 0 auto 16px;
791 - color: #fff;
792 -}
786 + h2 {
787 + max-width: 760px;
788 + margin: 0 auto 16px;
789 + color: #fff;
790 + }
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;
793 + max-width: 760px;
794 + margin: 0 auto 28px;
795 + color: #DBE4EF;
796 + font-size: 16px;
797 + line-height: 1.6;
851 851   }
852 852  
853 - .btn {
854 - display: inline-block;
855 - margin-left: auto;
856 - margin-right: auto;
800 + .btn-primary {
801 + border-color: #fff;
802 + background: #fff;
803 + color: @text;
804 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
805 +
806 + &:hover,
807 + &:focus {
808 + border-color: #fff;
809 + background: #fff;
810 + color: @brand-strong;
811 + text-decoration: none;
812 + }
857 857   }
858 858   }
859 859  }
... ... @@ -945,13 +945,15 @@
945 945   gap: 14px;
946 946   }
947 947  
948 - #mainContentArea .cta-panel {
949 - padding: 30px 22px;
950 - border-radius: 20px;
951 - }
904 + .cta-section {
905 + .cta-panel {
906 + padding: 30px 22px;
907 + border-radius: 20px;
952 952  
953 - #mainContentArea .cta-panel .btn-primary {
954 - width: 100%;
909 + .btn-primary {
910 + width: 100%;
911 + }
912 + }
955 955   }
956 956  }
957 957  
... ... @@ -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 -