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
-
... ... @@ -737,8 +737,8 @@ 737 737 738 738 /* ========== CTA ========== */ 739 739 740 - #mainContentArea.cta-section {741 - padding: 44px 0 56px;740 +.cta-section { 741 + padding: @section-padding; 742 742 743 743 .contact-inline { 744 744 margin: 0; ... ... @@ -750,70 +750,25 @@ 750 750 } 751 751 } 752 752 753 -#mainContentArea .cta-panel { 754 - position: relative; 755 - overflow: hidden; 756 - max-width: 1040px; 753 +.cta-panel { 754 + max-width: 860px; 757 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; 756 + padding: 32px; 757 + border-radius: @radius; 758 + border: 1px solid fade(@brand, 20%); 759 + box-shadow: @shadow-sm; 766 766 text-align: center; 767 -} 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 -} 762 + h2 { 763 + margin-top: 0; 764 + } 780 780 781 -#mainContentArea .cta-panel h2, 782 -#mainContentArea .cta-panel p, 783 -#mainContentArea .cta-panel .btn { 784 - position: relative; 785 - z-index: 1; 766 + p { 767 + color: @muted; 768 + line-height: 1.55; 769 + } 786 786 } 787 787 788 -#mainContentArea .cta-panel h2 { 789 - max-width: 760px; 790 - margin: 0 auto 16px; 791 - color: #fff; 792 -} 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 817 .resource-inline-cta { 818 818 display: flex; 819 819 align-items: center; ... ... @@ -945,14 +945,9 @@ 945 945 gap: 14px; 946 946 } 947 947 948 - #mainContentArea .cta-panel { 949 - padding: 30px 22px; 950 - border-radius: 20px; 903 + .cta-panel { 904 + padding: 24px 20px; 951 951 } 952 - 953 - #mainContentArea .cta-panel .btn-primary { 954 - width: 100%; 955 - } 956 956 } 957 957 958 958 /* ========== Resource / Article Pages ========== */ ... ... @@ -1861,95 +1861,33 @@ 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; 1814 +#mainContentArea .resource-content .resources-grid .resource-card { 1815 + display: grid; 1816 + grid-template-columns: 44px minmax(0, 1fr); 1817 + column-gap: 14px; 1818 + align-items: center; 1873 1873 } 1874 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; 1821 +#mainContentArea .resource-content .resources-grid .resource-card .service-icon { 1822 + grid-column: 1; 1823 + grid-row: 1; 1824 + margin: 0; 1882 1882 } 1883 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; 1827 +#mainContentArea .resource-content .resources-grid .resource-card .service-body { 1828 + display: contents; 1895 1895 } 1896 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); 1831 +#mainContentArea .resource-content .resources-grid .resource-card .service-body h4 { 1832 + grid-column: 2; 1833 + grid-row: 1; 1834 + align-self: center; 1835 + margin: 0; 1903 1903 } 1904 1904 1905 -/* Keep the sidebar clearly separated from the background. */ 1906 -#mainContentArea .resource-sidebar { 1907 - background: #fff; 1838 +#mainContentArea .resource-content .resources-grid .resource-card .service-body p { 1839 + grid-column: 1 / -1; 1840 + grid-row: 2; 1841 + margin: 14px 0 0; 1908 1908 } 1909 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 -