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; ... ... @@ -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