Changes for page Public Web Site
Last modified by Agnease on 2026/07/03 16:14
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -149,9 +149,9 @@ 149 149 </div> 150 150 </section> 151 151 152 - <section class=" contrast-band" aria-labelledby="industry-trust-title">152 + <section class="industry-trust-section" aria-labelledby="industry-trust-title"> 153 153 <div class="container"> 154 - <div class=" contrast-panel">154 + <div class="industry-trust-panel"> 155 155 <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2> 156 156 157 157 <p class="section-intro"> ... ... @@ -159,7 +159,7 @@ 159 159 government institutions, transportation, software development, compliance programs and regulated environments. 160 160 </p> 161 161 162 - <div class=" contrast-tags" aria-label="Industries and environments supported">162 + <div class="industry-tags" aria-label="Industries and environments supported"> 163 163 <span>Healthcare</span> 164 164 <span>Financial services</span> 165 165 <span>Scientific research</span> ... ... @@ -170,7 +170,7 @@ 170 170 <span>Regulated environments</span> 171 171 </div> 172 172 173 - <p class=" contrast-support">173 + <p class="industry-support"> 174 174 Organizations rely on these platforms to manage documentation, workflows, compliance processes, 175 175 research knowledge and critical business information. From upgrades and authentication integrations 176 176 to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -247,111 +247,34 @@ 247 247 margin-top: 22px; 248 248 } 249 249 250 -/* ========== ContrastBand========== */250 +/* ========== Trust Strip ========== */ 251 251 252 -.contrast-band { 253 - position: relative; 254 - width: 100vw; 255 - margin-left: calc(50% - 50vw); 256 - margin-right: calc(50% - 50vw); 257 - overflow: hidden; 258 - padding: 54px 0; 259 - background: 260 - radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%), 261 - radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%), 262 - linear-gradient(135deg, @text 0%, @text-soft 100%); 263 - color: #fff; 252 +.trust-strip { 253 + padding: 18px 0; 254 + border-top: 1px solid @line; 264 264 265 - &::before { 266 - content: ""; 267 - position: absolute; 268 - inset: 0; 269 - background: 270 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 271 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 272 - background-size: 52px 52px; 273 - opacity: .38; 274 - pointer-events: none; 275 - } 276 - 277 - .container { 278 - position: relative; 279 - z-index: 1; 280 - } 281 - 282 - .contrast-panel { 283 - max-width: 1040px; 256 + ul { 257 + max-width: 960px; 284 284 margin: 0 auto; 285 - text-align: center; 259 + padding: 0; 260 + list-style: none; 261 + display: flex; 262 + justify-content: center; 263 + gap: 22px; 264 + flex-wrap: wrap; 265 + color: @muted; 266 + font-size: 13px; 286 286 } 287 287 288 - h2 { 289 - max-width: 860px; 290 - margin: 0 auto 12px; 291 - color: #fff; 292 - } 293 - 294 - .section-intro { 295 - max-width: 840px; 296 - margin: 0 auto 26px; 297 - color: #D9E3EE; 298 - } 299 -} 300 - 301 -#mainContentArea { 302 - overflow-x: hidden; 303 -} 304 - 305 -.contrast-tags { 306 - max-width: 940px; 307 - margin: 0 auto; 308 - display: flex; 309 - flex-wrap: wrap; 310 - justify-content: center; 311 - gap: 10px; 312 - 313 - span { 314 - display: inline-flex; 269 + li { 270 + display: flex; 315 315 align-items: center; 316 - padding: 8px 13px; 317 - border: 1px solid fade(#fff, 18%); 318 - border-radius: 999px; 319 - background: fade(#fff, 8%); 320 - color: #F8FAFC; 321 - font-size: 13px; 322 - font-weight: 700; 323 - line-height: 1.2; 324 - 325 - &::before { 326 - content: ""; 327 - width: 7px; 328 - height: 7px; 329 - margin-right: 8px; 330 - border-radius: 50%; 331 - background: @brand; 332 - box-shadow: 0 0 0 4px fade(@brand, 18%); 333 - } 272 + gap: 7px; 334 334 } 335 -} 336 336 337 -.contrast-support { 338 - max-width: 860px; 339 - margin: 30px auto 0; 340 - color: #D9E3EE; 341 - text-align: center; 342 - font-size: 15px; 343 - line-height: 1.7; 344 -} 345 - 346 -@media (max-width: 640px) { 347 - .contrast-band { 348 - padding: 40px 0; 275 + i { 276 + color: @brand; 349 349 } 350 - 351 - .contrast-tags span { 352 - font-size: 12px; 353 - padding: 8px 11px; 354 - } 355 355 } 356 356 357 357 /* ========== Reusable Grids ========== */ ... ... @@ -814,7 +814,7 @@ 814 814 815 815 /* ========== CTA ========== */ 816 816 817 - #mainContentArea.cta-section {740 +.cta-section { 818 818 padding: 44px 0 56px; 819 819 820 820 .contact-inline { ... ... @@ -827,7 +827,7 @@ 827 827 } 828 828 } 829 829 830 - #mainContentArea.cta-panel {753 +.cta-panel { 831 831 position: relative; 832 832 overflow: hidden; 833 833 max-width: 1040px; ... ... @@ -841,54 +841,54 @@ 841 841 color: #fff; 842 842 box-shadow: @shadow; 843 843 text-align: center; 844 -} 845 845 846 - #mainContentArea.cta-panel::before {847 - content: ""; 848 - position: absolute; 849 - inset: 0; 850 - background: 851 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 852 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 853 - background-size: 48px 48px; 854 - opacity: .4; 855 - pointer-events: none; 856 -} 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 + } 857 857 858 - #mainContentArea.cta-panelh2,859 - #mainContentArea.cta-panelp,860 - #mainContentArea.cta-panel.btn {861 - position: relative; 862 - z-index: 1; 863 -} 780 + h2, 781 + p, 782 + .btn { 783 + position: relative; 784 + z-index: 1; 785 + } 864 864 865 - #mainContentArea.cta-panelh2 {866 - max-width: 760px; 867 - margin: 0 auto 16px; 868 - color: #fff; 869 -} 787 + h2 { 788 + max-width: 760px; 789 + margin: 0 auto 16px; 790 + color: #fff; 791 + } 870 870 871 - #mainContentArea.cta-panelp {872 - max-width: 760px; 873 - margin: 0 auto 28px; 874 - color: #DBE4EF; 875 - font-size: 16px; 876 - line-height: 1.6; 877 -} 793 + p { 794 + max-width: 760px; 795 + margin: 0 auto 28px; 796 + color: #DBE4EF; 797 + font-size: 16px; 798 + line-height: 1.6; 799 + } 878 878 879 -#mainContentArea .cta-panel .btn-primary { 880 - border-color: #fff; 881 - background: #fff; 882 - color: @text; 883 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18); 884 -} 801 + .btn-primary { 802 + border-color: #fff; 803 + background: #fff; 804 + color: @text; 805 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18); 885 885 886 -#mainContentArea .cta-panel .btn-primary:hover, 887 -#mainContentArea .cta-panel .btn-primary:focus { 888 - border-color: #fff; 889 - background: #fff; 890 - color: @brand-strong; 891 - text-decoration: none; 807 + &:hover, 808 + &:focus { 809 + border-color: #fff; 810 + background: #fff; 811 + color: @brand-strong; 812 + text-decoration: none; 813 + } 814 + } 892 892 } 893 893 894 894 .resource-inline-cta { ... ... @@ -1022,13 +1022,13 @@ 1022 1022 gap: 14px; 1023 1023 } 1024 1024 1025 - #mainContentArea.cta-panel {948 + .cta-panel { 1026 1026 padding: 30px 22px; 1027 1027 border-radius: 20px; 1028 - } 1029 1029 1030 - #mainContentArea .cta-panel .btn-primary { 1031 - width: 100%; 952 + .btn-primary { 953 + width: 100%; 954 + } 1032 1032 } 1033 1033 } 1034 1034 ... ... @@ -1985,6 +1985,7 @@ 1985 1985 } 1986 1986 1987 1987 /* Make CTA panels stand out more clearly. */ 1911 +#mainContentArea .cta-panel, 1988 1988 #mainContentArea .resource-cta, 1989 1989 #mainContentArea .resource-inline-cta { 1990 1990 background: #fff;