Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.24
edited by Agnease
on 2026/07/03 13:15
Change comment: There is no comment for this version
To version 28.15
edited by Agnease
on 2026/07/03 12:54
Change comment: There is no comment for this version

Summary

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,122 +247,33 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Contrast Band ========== */
250 +/* ========== Trust Strip ========== */
251 251  
252 -.contrast-band {
253 - position: relative;
254 - overflow: visible;
255 - isolation: isolate;
256 - padding: 54px 0;
257 - border-top: 0;
258 - color: #fff;
259 - background: transparent;
260 -}
252 +.trust-strip {
253 + padding: 18px 0;
254 + border-top: 1px solid @line;
261 261  
262 -.contrast-band::before {
263 - content: "";
264 - position: absolute;
265 - top: 0;
266 - bottom: 0;
267 - left: 50%;
268 - width: 100vw;
269 - transform: translateX(-50%);
270 - z-index: -2;
271 - background:
272 - radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
273 - radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
274 - linear-gradient(135deg, @text 0%, @text-soft 100%);
275 -}
256 + ul {
257 + max-width: 960px;
258 + margin: 0 auto;
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;
267 + }
276 276  
277 -.contrast-band::after {
278 - content: "";
279 - position: absolute;
280 - top: 0;
281 - bottom: 0;
282 - left: 50%;
283 - width: 100vw;
284 - transform: translateX(-50%);
285 - z-index: -1;
286 - background:
287 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
288 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
289 - background-size: 52px 52px;
290 - opacity: .38;
291 - pointer-events: none;
292 -}
293 -
294 -.contrast-band .container {
295 - position: relative;
296 - z-index: 1;
297 -}
298 -
299 -.contrast-panel {
300 - max-width: 1040px;
301 - margin: 0 auto;
302 - text-align: center;
303 -}
304 -
305 -.contrast-band h2 {
306 - max-width: 860px;
307 - margin: 0 auto 12px;
308 - color: #fff;
309 -}
310 -
311 -.contrast-band .section-intro {
312 - max-width: 840px;
313 - margin: 0 auto 26px;
314 - color: #D9E3EE;
315 -}
316 -
317 -.contrast-tags {
318 - max-width: 940px;
319 - margin: 0 auto;
320 - display: flex;
321 - flex-wrap: wrap;
322 - justify-content: center;
323 - gap: 10px;
324 -}
325 -
326 -.contrast-tags span {
327 - display: inline-flex;
328 - align-items: center;
329 - padding: 8px 13px;
330 - border: 1px solid fade(#fff, 18%);
331 - border-radius: 999px;
332 - background: fade(#fff, 8%);
333 - color: #F8FAFC;
334 - font-size: 13px;
335 - font-weight: 700;
336 - line-height: 1.2;
337 -}
338 -
339 -.contrast-tags span::before {
340 - content: "";
341 - width: 7px;
342 - height: 7px;
343 - margin-right: 8px;
344 - border-radius: 50%;
345 - background: @brand;
346 - box-shadow: 0 0 0 4px fade(@brand, 18%);
347 -}
348 -
349 -.contrast-support {
350 - max-width: 860px;
351 - margin: 30px auto 0;
352 - color: #D9E3EE;
353 - text-align: center;
354 - font-size: 15px;
355 - line-height: 1.7;
356 -}
357 -
358 -@media (max-width: 640px) {
359 - .contrast-band {
360 - padding: 40px 0;
269 + li {
270 + display: flex;
271 + align-items: center;
272 + gap: 7px;
361 361   }
362 362  
363 - .contrast-tags span {
364 - font-size: 12px;
365 - padding: 8px 11px;
275 + i {
276 + color: @brand;
366 366   }
367 367  }
368 368  
... ... @@ -522,6 +522,80 @@
522 522   }
523 523  }
524 524  
436 +.industry-trust-section {
437 + background:
438 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
439 +
440 + .industry-trust-panel {
441 + max-width: 1040px;
442 + margin: 0 auto;
443 + padding: 30px 28px;
444 + border: 1px solid fade(@brand, 16%);
445 + border-radius: @radius;
446 + background:
447 + radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
448 + box-shadow: @shadow-sm;
449 + text-align: center;
450 + }
451 +
452 + h2 {
453 + margin-bottom: 12px;
454 + }
455 +
456 + .section-intro {
457 + margin-bottom: 20px;
458 + max-width: 820px;
459 + }
460 +
461 + .industry-tags {
462 + max-width: 880px;
463 + margin: 0 auto;
464 + display: flex;
465 + flex-wrap: wrap;
466 + justify-content: center;
467 + gap: 10px;
468 + }
469 +
470 + .industry-tags span {
471 + display: inline-flex;
472 + align-items: center;
473 + padding: 7px 12px;
474 + border: 1px solid fade(@brand, 20%);
475 + border-radius: 999px;
476 + background: #fff;
477 + color: @text;
478 + font-size: 13px;
479 + font-weight: 600;
480 + line-height: 1.2;
481 + box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
482 + }
483 +
484 + .industry-support {
485 + max-width: 820px;
486 + margin: 22px auto 0;
487 + color: @muted;
488 + font-size: 16px;
489 + line-height: 1.6;
490 + }
491 +}
492 +
493 +@media (max-width: 640px) {
494 + .industry-trust-section {
495 + .industry-trust-panel {
496 + padding: 24px 18px;
497 + }
498 +
499 + .industry-tags {
500 + gap: 8px;
501 + }
502 +
503 + .industry-tags span {
504 + font-size: 12px;
505 + padding: 6px 10px;
506 + }
507 + }
508 +}
509 +
525 525  /* ========== Services ========== */
526 526  
527 527  .services {
... ... @@ -752,7 +752,7 @@
752 752  
753 753  /* ========== CTA ========== */
754 754  
755 -#mainContentArea .cta-section {
740 +.cta-section {
756 756   padding: 44px 0 56px;
757 757  
758 758   .contact-inline {
... ... @@ -765,7 +765,7 @@
765 765   }
766 766  }
767 767  
768 -#mainContentArea .cta-panel {
753 +.cta-panel {
769 769   position: relative;
770 770   overflow: hidden;
771 771   max-width: 1040px;
... ... @@ -779,54 +779,54 @@
779 779   color: #fff;
780 780   box-shadow: @shadow;
781 781   text-align: center;
782 -}
783 783  
784 -#mainContentArea .cta-panel::before {
785 - content: "";
786 - position: absolute;
787 - inset: 0;
788 - background:
789 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
790 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
791 - background-size: 48px 48px;
792 - opacity: .4;
793 - pointer-events: none;
794 -}
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 + }
795 795  
796 -#mainContentArea .cta-panel h2,
797 -#mainContentArea .cta-panel p,
798 -#mainContentArea .cta-panel .btn {
799 - position: relative;
800 - z-index: 1;
801 -}
780 + h2,
781 + p,
782 + .btn {
783 + position: relative;
784 + z-index: 1;
785 + }
802 802  
803 -#mainContentArea .cta-panel h2 {
804 - max-width: 760px;
805 - margin: 0 auto 16px;
806 - color: #fff;
807 -}
787 + h2 {
788 + max-width: 760px;
789 + margin: 0 auto 16px;
790 + color: #fff;
791 + }
808 808  
809 -#mainContentArea .cta-panel p {
810 - max-width: 760px;
811 - margin: 0 auto 28px;
812 - color: #DBE4EF;
813 - font-size: 16px;
814 - line-height: 1.6;
815 -}
793 + p {
794 + max-width: 760px;
795 + margin: 0 auto 28px;
796 + color: #DBE4EF;
797 + font-size: 16px;
798 + line-height: 1.6;
799 + }
816 816  
817 -#mainContentArea .cta-panel .btn-primary {
818 - border-color: #fff;
819 - background: #fff;
820 - color: @text;
821 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
822 -}
801 + .btn-primary {
802 + border-color: #fff;
803 + background: #fff;
804 + color: @text;
805 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
823 823  
824 -#mainContentArea .cta-panel .btn-primary:hover,
825 -#mainContentArea .cta-panel .btn-primary:focus {
826 - border-color: #fff;
827 - background: #fff;
828 - color: @brand-strong;
829 - text-decoration: none;
807 + &:hover,
808 + &:focus {
809 + border-color: #fff;
810 + background: #fff;
811 + color: @brand-strong;
812 + text-decoration: none;
813 + }
814 + }
830 830  }
831 831  
832 832  .resource-inline-cta {
... ... @@ -960,13 +960,13 @@
960 960   gap: 14px;
961 961   }
962 962  
963 - #mainContentArea .cta-panel {
948 + .cta-panel {
964 964   padding: 30px 22px;
965 965   border-radius: 20px;
966 - }
967 967  
968 - #mainContentArea .cta-panel .btn-primary {
969 - width: 100%;
952 + .btn-primary {
953 + width: 100%;
954 + }
970 970   }
971 971  }
972 972  
... ... @@ -1923,6 +1923,7 @@
1923 1923  }
1924 1924  
1925 1925  /* Make CTA panels stand out more clearly. */
1911 +#mainContentArea .cta-panel,
1926 1926  #mainContentArea .resource-cta,
1927 1927  #mainContentArea .resource-inline-cta {
1928 1928   background: #fff;