Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 29.4
edited by Agnease
on 2026/07/03 15:26
Change comment: There is no comment for this version
To version 28.29
edited by Agnease
on 2026/07/03 13:56
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="industry-trust-section" aria-labelledby="industry-trust-title">
152 + <section class="contrast-band" aria-labelledby="industry-trust-title">
153 153   <div class="container">
154 - <div class="industry-trust-panel">
154 + <div class="contrast-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="industry-tags" aria-label="Industries and environments supported">
162 + <div class="contrast-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="industry-support">
173 + <p class="contrast-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,33 +247,112 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Trust Strip ========== */
250 +/* ========== Contrast Band ========== */
251 251  
252 -.trust-strip {
253 - padding: 18px 0;
254 - border-top: 1px solid @line;
252 +.contrast-band {
253 + position: relative;
254 + overflow: hidden;
255 + padding: 54px 0;
256 + border-top: 0;
257 + background:
258 + radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
259 + radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
260 + linear-gradient(135deg, @text 0%, @text-soft 100%);
261 + color: #fff;
255 255  
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 - }
263 + /*
264 + * Full-bleed background without changing layout width.
265 + * This extends the dark surface beyond a fixed-width parent
266 + * without using 100vw or negative margins.
267 + */
268 + box-shadow: 0 0 0 100vmax @text;
269 + clip-path: inset(0 -100vmax);
270 +}
268 268  
269 - li {
270 - display: flex;
271 - align-items: center;
272 - gap: 7px;
272 +.contrast-band::before {
273 + content: "";
274 + position: absolute;
275 + inset: 0;
276 + background:
277 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
278 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
279 + background-size: 52px 52px;
280 + opacity: .38;
281 + pointer-events: none;
282 +}
283 +
284 +.contrast-band .container {
285 + position: relative;
286 + z-index: 1;
287 +}
288 +
289 +.contrast-panel {
290 + max-width: 1040px;
291 + margin: 0 auto;
292 + text-align: center;
293 +}
294 +
295 +.contrast-band h2 {
296 + max-width: 860px;
297 + margin: 0 auto 12px;
298 + color: #fff;
299 +}
300 +
301 +.contrast-band .section-intro {
302 + max-width: 840px;
303 + margin: 0 auto 26px;
304 + color: #D9E3EE;
305 +}
306 +
307 +.contrast-tags {
308 + max-width: 940px;
309 + margin: 0 auto;
310 + display: flex;
311 + flex-wrap: wrap;
312 + justify-content: center;
313 + gap: 10px;
314 +}
315 +
316 +.contrast-tags span {
317 + display: inline-flex;
318 + align-items: center;
319 + padding: 8px 13px;
320 + border: 1px solid fade(#fff, 18%);
321 + border-radius: 999px;
322 + background: fade(#fff, 8%);
323 + color: #F8FAFC;
324 + font-size: 13px;
325 + font-weight: 700;
326 + line-height: 1.2;
327 +}
328 +
329 +.contrast-tags span::before {
330 + content: "";
331 + width: 7px;
332 + height: 7px;
333 + margin-right: 8px;
334 + border-radius: 50%;
335 + background: @brand;
336 + box-shadow: 0 0 0 4px fade(@brand, 18%);
337 +}
338 +
339 +.contrast-support {
340 + max-width: 860px;
341 + margin: 30px auto 0;
342 + color: #D9E3EE;
343 + text-align: center;
344 + font-size: 15px;
345 + line-height: 1.7;
346 +}
347 +
348 +@media (max-width: 640px) {
349 + .contrast-band {
350 + padding: 40px 0;
273 273   }
274 274  
275 - i {
276 - color: @brand;
353 + .contrast-tags span {
354 + font-size: 12px;
355 + padding: 8px 11px;
277 277   }
278 278  }
279 279  
... ... @@ -433,80 +433,6 @@
433 433   }
434 434  }
435 435  
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 -
510 510  /* ========== Services ========== */
511 511  
512 512  .services {
... ... @@ -576,60 +576,22 @@
576 576  
577 577  .split-grid {
578 578   display: grid;
579 - grid-template-columns: .95fr 1.05fr;
584 + grid-template-columns: 1.1fr .9fr;
580 580   grid-gap: 36px;
581 581   max-width: 1040px;
582 582   margin: 0 auto;
583 - align-items: stretch;
588 + align-items: center;
584 584  }
585 585  
586 586  .split-copy {
587 - position: relative;
588 - overflow: hidden;
589 - min-height: 100%;
590 - padding: 42px 38px;
591 - border-radius: 26px;
592 - background:
593 - radial-gradient(circle at 86% 12%, fade(@brand, 22%) 0%, transparent 32%),
594 - linear-gradient(135deg, @text 0%, @text-soft 100%);
595 - color: #fff;
596 - box-shadow: @shadow;
597 -
598 - &::before {
599 - content: "";
600 - position: absolute;
601 - inset: 0;
602 - background:
603 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
604 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
605 - background-size: 48px 48px;
606 - opacity: .36;
607 - pointer-events: none;
608 - }
609 -
610 - h2,
611 - p {
612 - position: relative;
613 - z-index: 1;
614 - }
615 -
616 616   h2 {
617 617   text-align: left;
618 - margin: 0 0 18px;
619 - color: #fff;
620 - font-size: 30px;
621 - line-height: 1.18;
622 - letter-spacing: -.02em;
594 + margin-top: 0;
623 623   }
624 624  
625 625   p {
626 - margin: 0 0 18px;
627 - color: #DBE4EF;
628 - line-height: 1.65;
629 -
630 - &:last-child {
631 - margin-bottom: 0;
632 - }
598 + color: @muted;
599 + line-height: 1.6;
633 633   }
634 634  }
635 635  
... ... @@ -642,43 +642,34 @@
642 642   li {
643 643   counter-increment: process;
644 644   position: relative;
645 - min-height: 104px;
646 - padding: 24px 26px 24px 82px;
647 - margin-bottom: 18px;
612 + padding: 16px 16px 16px 58px;
613 + margin-bottom: 12px;
648 648   border: 1px solid @line;
649 649   border-radius: @radius;
650 - background: #fff;
651 651   box-shadow: @shadow-sm;
652 652   color: @muted;
653 653   line-height: 1.5;
654 654  
655 - &:last-child {
656 - margin-bottom: 0;
657 - }
658 -
659 659   &:before {
660 660   content: counter(process);
661 661   position: absolute;
662 - left: 26px;
663 - top: 26px;
664 - width: 38px;
665 - height: 38px;
623 + left: 16px;
624 + top: 16px;
625 + width: 28px;
626 + height: 28px;
666 666   border-radius: 50%;
667 - background: @brand;
668 - color: #fff;
628 + background: fade(@brand, 10%);
629 + color: @brand;
669 669   display: flex;
670 670   align-items: center;
671 671   justify-content: center;
672 672   font-weight: 800;
673 - box-shadow: 0 0 0 8px fade(@brand, 10%);
674 674   }
675 675  
676 676   strong {
677 677   display: block;
678 678   color: @text;
679 - margin-bottom: 5px;
680 - font-size: 16px;
681 - line-height: 1.3;
639 + margin-bottom: 3px;
682 682   }
683 683   }
684 684  }
... ... @@ -784,7 +784,7 @@
784 784  
785 785  /* ========== CTA ========== */
786 786  
787 -.cta-section {
745 +#mainContentArea .cta-section {
788 788   padding: 44px 0 56px;
789 789  
790 790   .contact-inline {
... ... @@ -795,68 +795,112 @@
795 795   color: @brand;
796 796   }
797 797   }
756 +}
798 798  
799 - .cta-panel {
800 - position: relative;
801 - overflow: hidden;
802 - max-width: 1040px;
803 - margin: 0 auto;
804 - padding: 48px 40px;
805 - border: 0;
806 - border-radius: 26px;
807 - background:
808 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
809 - linear-gradient(135deg, @text 0%, @text-soft 100%);
810 - color: #fff;
811 - box-shadow: @shadow;
812 - text-align: center;
758 +#mainContentArea .cta-panel {
759 + position: relative;
760 + overflow: hidden;
761 + max-width: 1040px;
762 + margin: 0 auto;
763 + padding: 48px 40px;
764 + border: 0;
765 + border-radius: 26px;
766 + background:
767 + radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
768 + linear-gradient(135deg, @text 0%, @text-soft 100%);
769 + color: #fff;
770 + box-shadow: @shadow;
771 + text-align: center;
772 +}
813 813  
814 - &::before {
815 - content: "";
816 - position: absolute;
817 - inset: 0;
818 - background:
819 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
820 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
821 - background-size: 48px 48px;
822 - opacity: .4;
823 - pointer-events: none;
824 - }
774 +#mainContentArea .cta-panel::before {
775 + content: "";
776 + position: absolute;
777 + inset: 0;
778 + background:
779 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
780 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
781 + background-size: 48px 48px;
782 + opacity: .4;
783 + pointer-events: none;
784 +}
825 825  
826 - h2,
827 - p,
828 - .btn {
829 - position: relative;
830 - z-index: 1;
831 - }
786 +#mainContentArea .cta-panel h2,
787 +#mainContentArea .cta-panel p,
788 +#mainContentArea .cta-panel .btn {
789 + position: relative;
790 + z-index: 1;
791 +}
832 832  
833 - h2 {
834 - max-width: 760px;
835 - margin: 0 auto 16px;
836 - color: #fff;
837 - }
793 +#mainContentArea .cta-panel h2 {
794 + max-width: 760px;
795 + margin: 0 auto 16px;
796 + color: #fff;
797 +}
838 838  
799 +#mainContentArea .cta-panel p {
800 + max-width: 760px;
801 + margin: 0 auto 28px;
802 + color: #DBE4EF;
803 + font-size: 16px;
804 + line-height: 1.6;
805 +}
806 +
807 +#mainContentArea .cta-panel .btn-primary {
808 + border-color: #fff;
809 + background: #fff;
810 + color: @text;
811 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
812 +}
813 +
814 +#mainContentArea .cta-panel .btn-primary:hover,
815 +#mainContentArea .cta-panel .btn-primary:focus {
816 + border-color: #fff;
817 + background: #fff;
818 + color: @brand-strong;
819 + text-decoration: none;
820 +}
821 +
822 +.resource-inline-cta {
823 + display: flex;
824 + align-items: center;
825 + justify-content: space-between;
826 + gap: 22px;
827 + margin: 30px 0;
828 + padding: 20px 22px;
829 + border: 1px solid fade(@brand, 22%);
830 + border-radius: @radius;
831 + background: @brand-bg;
832 + box-shadow: @shadow-sm;
833 +
834 + p {
835 + margin: 0;
836 + color: @muted;
837 + line-height: 1.55;
838 + }
839 +
840 + strong {
841 + color: @text;
842 + }
843 +
844 + .btn {
845 + flex-shrink: 0;
846 + }
847 +}
848 +
849 +@media (max-width: 767px) {
850 + .resource-inline-cta {
851 + display: block;
852 + text-align: center;
853 +
839 839   p {
840 - max-width: 760px;
841 - margin: 0 auto 28px;
842 - color: #DBE4EF;
843 - font-size: 16px;
844 - line-height: 1.6;
855 + margin-bottom: 14px;
845 845   }
846 846  
847 - .btn-primary {
848 - border-color: #fff;
849 - background: #fff;
850 - color: @text;
851 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
852 -
853 - &:hover,
854 - &:focus {
855 - border-color: #fff;
856 - background: #fff;
857 - color: @brand-strong;
858 - text-decoration: none;
859 - }
858 + .btn {
859 + display: inline-block;
860 + margin-left: auto;
861 + margin-right: auto;
860 860   }
861 861   }
862 862  }
... ... @@ -948,15 +948,13 @@
948 948   gap: 14px;
949 949   }
950 950  
951 - .cta-section {
952 - .cta-panel {
953 - padding: 30px 22px;
954 - border-radius: 20px;
953 + #mainContentArea .cta-panel {
954 + padding: 30px 22px;
955 + border-radius: 20px;
956 + }
955 955  
956 - .btn-primary {
957 - width: 100%;
958 - }
959 - }
958 + #mainContentArea .cta-panel .btn-primary {
959 + width: 100%;
960 960   }
961 961  }
962 962  
... ... @@ -1657,38 +1657,10 @@
1657 1657   background-attachment: fixed;
1658 1658  }
1659 1659  
1660 -/* Let the body background show through the XWiki wrappers.
1661 -#mainContentArea,
1662 -.resource-page,
1663 -.resources-index-page {
1664 - background: transparent !important;
1665 - background-image: none !important;
1660 +#mainContentArea {
1661 + padding: 0;
1662 + overflow-x: hidden;
1666 1666  }
1667 -*/
1668 -/* Remove local decorative backgrounds that compete with the global gradient.
1669 -.hero,
1670 -.hero.hero-centered,
1671 -.trust-strip,
1672 -.industry-trust-section,
1673 -.split-section,
1674 -.resource-strip,
1675 -.homepage-resource-strip,
1676 -.resource-header,
1677 -.product-section-muted,
1678 -.resources-index-page {
1679 - background: transparent !important;
1680 - background-image: none !important;
1681 -}
1682 - */
1683 -/* Keep large panels readable, but remove their inner gradients.
1684 -.industry-trust-section .industry-trust-panel,
1685 -.cta-panel,
1686 -.resource-inline-cta,
1687 -.resource-note,
1688 -.resource-cta {
1689 - background: #fff !important;
1690 - background-image: none !important;
1691 -} */
1692 1692  
1693 1693  /* ========== Main Page Hero / SaaS Layout ========== */
1694 1694  
... ... @@ -1866,3 +1866,95 @@
1866 1866   }
1867 1867  }
1868 1868  
1841 +/* ========== Accessibility / Contrast Improvements ========== */
1842 +
1843 +/* Make the global background softer and less distracting. */
1844 +/*body {
1845 + background:
1846 + radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1847 + radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1848 + linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1849 + background-attachment: scroll;
1850 +}*/
1851 +
1852 +/* Keep the article area readable while preserving the page background around it. */
1853 +#mainContentArea .resource-layout {
1854 + padding: 28px;
1855 + border: 1px solid fade(@line, 85%);
1856 + border-radius: @radius;
1857 + background: rgba(255, 255, 255, .88);
1858 + box-shadow: @shadow-sm;
1859 +}
1860 +
1861 +/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1862 +#mainContentArea .widget,
1863 +#mainContentArea .pathway-card,
1864 +#mainContentArea .service-card,
1865 +#mainContentArea .resource-card,
1866 +#mainContentArea .services .service,
1867 +#mainContentArea .product-card,
1868 +#mainContentArea .product-feature,
1869 +#mainContentArea .product-summary-card,
1870 +#mainContentArea .product-info-card {
1871 + background: #fff;
1872 +}
1873 +
1874 +/* Make notes more readable and visually stronger. */
1875 +#mainContentArea .resource-note {
1876 + border: 1px solid fade(@brand, 18%);
1877 + border-left: 4px solid @brand;
1878 + background: #fff;
1879 + box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1880 +}
1881 +
1882 +/* Keep the sidebar clearly separated from the background. */
1883 +#mainContentArea .resource-sidebar {
1884 + background: #fff;
1885 +}
1886 +
1887 +/* Make CTA panels stand out more clearly. */
1888 +#mainContentArea .resource-cta,
1889 +#mainContentArea .resource-inline-cta {
1890 + background: #fff;
1891 +}
1892 +
1893 +/* Improve table readability on long resource pages. */
1894 +#mainContentArea .resource-content table {
1895 + background: #fff;
1896 +}
1897 +
1898 +#mainContentArea .resource-content table th {
1899 + color: @text;
1900 + background: #F8FAFC;
1901 +}
1902 +
1903 +#mainContentArea .resource-content table td {
1904 + color: @text-soft;
1905 +}
1906 +
1907 +/* Slightly improve paragraph/list contrast in long articles. */
1908 +#mainContentArea .resource-content p,
1909 +#mainContentArea .resource-content li {
1910 + color: @text-soft;
1911 +}
1912 +
1913 +#mainContentArea .resource-content .resource-note p,
1914 +#mainContentArea .resource-content .resource-checklist li,
1915 +#mainContentArea .resource-content .process-list li {
1916 + color: @muted;
1917 +}
1918 +
1919 +@media (max-width: 900px) {
1920 + #mainContentArea .resource-layout {
1921 + padding: 22px;
1922 + }
1923 +}
1924 +
1925 +@media (max-width: 640px) {
1926 + #mainContentArea .resource-layout {
1927 + padding: 18px;
1928 + border-radius: 14px;
1929 + }
1930 +}
1931 +
1932 +