Changes for page Public Web Site
Last modified by Agnease on 2026/07/03 16:14
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -738,7 +738,7 @@ 738 738 /* ========== CTA ========== */ 739 739 740 740 .cta-section { 741 - padding: @section-padding;741 + padding: 44px 0 56px; 742 742 743 743 .contact-inline { 744 744 margin: 0; ... ... @@ -751,22 +751,67 @@ 751 751 } 752 752 753 753 .cta-panel { 754 - max-width: 860px; 754 + position: relative; 755 + overflow: hidden; 756 + max-width: 1040px; 755 755 margin: 0 auto; 756 - padding: 32px; 757 - border-radius: @radius; 758 - border: 1px solid fade(@brand, 20%); 759 - box-shadow: @shadow-sm; 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; 760 760 text-align: center; 761 761 768 + &::before { 769 + content: ""; 770 + position: absolute; 771 + inset: 0; 772 + background: 773 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 774 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 775 + background-size: 48px 48px; 776 + opacity: .4; 777 + pointer-events: none; 778 + } 779 + 780 + h2, 781 + p, 782 + .btn { 783 + position: relative; 784 + z-index: 1; 785 + } 786 + 762 762 h2 { 763 - margin-top: 0; 788 + max-width: 760px; 789 + margin: 0 auto 16px; 790 + color: #fff; 764 764 } 765 765 766 766 p { 767 - color: @muted; 768 - line-height: 1.55; 794 + max-width: 760px; 795 + margin: 0 auto 28px; 796 + color: #DBE4EF; 797 + font-size: 16px; 798 + line-height: 1.6; 769 769 } 800 + 801 + .btn-primary { 802 + border-color: #fff; 803 + background: #fff; 804 + color: @text; 805 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18); 806 + 807 + &:hover, 808 + &:focus { 809 + border-color: #fff; 810 + background: #fff; 811 + color: @brand-strong; 812 + text-decoration: none; 813 + } 814 + } 770 770 } 771 771 772 772 .resource-inline-cta { ... ... @@ -901,7 +901,12 @@ 901 901 } 902 902 903 903 .cta-panel { 904 - padding: 24px 20px; 949 + padding: 30px 22px; 950 + border-radius: 20px; 951 + 952 + .btn-primary { 953 + width: 100%; 954 + } 905 905 } 906 906 } 907 907 ... ... @@ -1811,3 +1811,96 @@ 1811 1811 } 1812 1812 } 1813 1813 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 +