Skip to Content

Changes for page Public Web Site

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

Summary

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;
... ... @@ -748,67 +748,68 @@
748 748   color: @brand;
749 749   }
750 750   }
751 -}
752 752  
753 -.cta-panel {
754 - max-width: 860px;
755 - margin: 0 auto;
756 - padding: 32px;
757 - border-radius: @radius;
758 - border: 1px solid fade(@brand, 20%);
759 - box-shadow: @shadow-sm;
760 - text-align: center;
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;
761 761  
762 - h2 {
763 - margin-top: 0;
764 - }
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 + }
765 765  
766 - p {
767 - color: @muted;
768 - line-height: 1.55;
769 - }
770 -}
779 + h2,
780 + p,
781 + .btn {
782 + position: relative;
783 + z-index: 1;
784 + }
771 771  
772 -.resource-inline-cta {
773 - display: flex;
774 - align-items: center;
775 - justify-content: space-between;
776 - gap: 22px;
777 - margin: 30px 0;
778 - padding: 20px 22px;
779 - border: 1px solid fade(@brand, 22%);
780 - border-radius: @radius;
781 - background: @brand-bg;
782 - box-shadow: @shadow-sm;
786 + h2 {
787 + max-width: 760px;
788 + margin: 0 auto 16px;
789 + color: #fff;
790 + }
783 783  
784 - p {
785 - margin: 0;
786 - color: @muted;
787 - line-height: 1.55;
788 - }
789 -
790 - strong {
791 - color: @text;
792 - }
793 -
794 - .btn {
795 - flex-shrink: 0;
796 - }
797 -}
798 -
799 -@media (max-width: 767px) {
800 - .resource-inline-cta {
801 - display: block;
802 - text-align: center;
803 -
804 804   p {
805 - margin-bottom: 14px;
793 + max-width: 760px;
794 + margin: 0 auto 28px;
795 + color: #DBE4EF;
796 + font-size: 16px;
797 + line-height: 1.6;
806 806   }
807 807  
808 - .btn {
809 - display: inline-block;
810 - margin-left: auto;
811 - 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 + }
812 812   }
813 813   }
814 814  }
... ... @@ -900,8 +900,15 @@
900 900   gap: 14px;
901 901   }
902 902  
903 - .cta-panel {
904 - padding: 24px 20px;
904 + .cta-section {
905 + .cta-panel {
906 + padding: 30px 22px;
907 + border-radius: 20px;
908 +
909 + .btn-primary {
910 + width: 100%;
911 + }
912 + }
905 905   }
906 906  }
907 907  
... ... @@ -1811,96 +1811,3 @@
1811 1811   }
1812 1812  }
1813 1813  
1814 -/* ========== Accessibility / Contrast Improvements ========== */
1815 -
1816 -/* Make the global background softer and less distracting. */
1817 -body {
1818 - background:
1819 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1820 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1821 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1822 - background-attachment: scroll;
1823 -}
1824 -
1825 -/* Keep the article area readable while preserving the page background around it. */
1826 -#mainContentArea .resource-layout {
1827 - padding: 28px;
1828 - border: 1px solid fade(@line, 85%);
1829 - border-radius: @radius;
1830 - background: rgba(255, 255, 255, .88);
1831 - box-shadow: @shadow-sm;
1832 -}
1833 -
1834 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1835 -#mainContentArea .widget,
1836 -#mainContentArea .pathway-card,
1837 -#mainContentArea .service-card,
1838 -#mainContentArea .resource-card,
1839 -#mainContentArea .services .service,
1840 -#mainContentArea .product-card,
1841 -#mainContentArea .product-feature,
1842 -#mainContentArea .product-summary-card,
1843 -#mainContentArea .product-info-card {
1844 - background: #fff;
1845 -}
1846 -
1847 -/* Make notes more readable and visually stronger. */
1848 -#mainContentArea .resource-note {
1849 - border: 1px solid fade(@brand, 18%);
1850 - border-left: 4px solid @brand;
1851 - background: #fff;
1852 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1853 -}
1854 -
1855 -/* Keep the sidebar clearly separated from the background. */
1856 -#mainContentArea .resource-sidebar {
1857 - background: #fff;
1858 -}
1859 -
1860 -/* Make CTA panels stand out more clearly. */
1861 -#mainContentArea .cta-panel,
1862 -#mainContentArea .resource-cta,
1863 -#mainContentArea .resource-inline-cta {
1864 - background: #fff;
1865 -}
1866 -
1867 -/* Improve table readability on long resource pages. */
1868 -#mainContentArea .resource-content table {
1869 - background: #fff;
1870 -}
1871 -
1872 -#mainContentArea .resource-content table th {
1873 - color: @text;
1874 - background: #F8FAFC;
1875 -}
1876 -
1877 -#mainContentArea .resource-content table td {
1878 - color: @text-soft;
1879 -}
1880 -
1881 -/* Slightly improve paragraph/list contrast in long articles. */
1882 -#mainContentArea .resource-content p,
1883 -#mainContentArea .resource-content li {
1884 - color: @text-soft;
1885 -}
1886 -
1887 -#mainContentArea .resource-content .resource-note p,
1888 -#mainContentArea .resource-content .resource-checklist li,
1889 -#mainContentArea .resource-content .process-list li {
1890 - color: @muted;
1891 -}
1892 -
1893 -@media (max-width: 900px) {
1894 - #mainContentArea .resource-layout {
1895 - padding: 22px;
1896 - }
1897 -}
1898 -
1899 -@media (max-width: 640px) {
1900 - #mainContentArea .resource-layout {
1901 - padding: 18px;
1902 - border-radius: 14px;
1903 - }
1904 -}
1905 -
1906 -