Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.44
edited by Agnease
on 2026/07/03 14:23
Change comment: There is no comment for this version
To version 28.11
edited by Agnease
on 2026/07/03 12:00
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,130 +247,36 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Contrast Band ========== */
250 +/* ========== Trust Strip ========== */
251 251  
252 -.contrast-band {
253 - position: relative;
254 - z-index: 0;
255 - overflow: visible; /* allow pseudo-element to escape */
256 - padding: 54px 0;
257 - border-top: 0;
258 - color: #fff;
252 +.trust-strip {
253 + padding: 18px 0;
254 + border-top: 1px solid @line;
259 259  
260 - /* Remove gradient from here */
261 - background: none;
262 -}
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 263  
264 -/* Full‑bleed gradient background */
265 -.contrast-band::before {
266 - content: "";
267 - position: absolute;
268 - top: 0;
269 - left: 50%;
270 - width: 100vw; /* full viewport width */
271 - height: 100%;
272 - transform: translateX(-50%);
273 - z-index: -1;
274 -
275 - background:
276 - radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
277 - radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
278 - linear-gradient(135deg, @text 0%, @text-soft 100%);
279 -
280 - background: red !important;
281 -}
282 -
283 -/* Grid overlay stays exactly as you had it */
284 -.contrast-band::after {
285 - content: "";
286 - position: absolute;
287 - inset: 0;
288 - background:
289 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
290 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
291 - background-size: 52px 52px;
292 - opacity: .38;
293 - pointer-events: none;
294 - z-index: 0;
295 -}
296 -
297 -.contrast-band .container {
298 - position: relative;
299 - z-index: 1;
300 -}
301 -
302 -/* Everything below stays unchanged */
303 -.contrast-panel {
304 - max-width: 1040px;
305 - margin: 0 auto;
306 - text-align: center;
307 -}
308 -
309 -.contrast-band h2 {
310 - max-width: 860px;
311 - margin: 0 auto 12px;
312 - color: #fff;
313 -}
314 -
315 -.contrast-band .section-intro {
316 - max-width: 840px;
317 - margin: 0 auto 26px;
318 - color: #D9E3EE;
319 -}
320 -
321 -.contrast-tags {
322 - max-width: 940px;
323 - margin: 0 auto;
324 - display: flex;
325 - flex-wrap: wrap;
326 - justify-content: center;
327 - gap: 10px;
328 -}
329 -
330 -.contrast-tags span {
331 - display: inline-flex;
332 - align-items: center;
333 - padding: 8px 13px;
334 - border: 1px solid fade(#fff, 18%);
335 - border-radius: 999px;
336 - background: fade(#fff, 8%);
337 - color: #F8FAFC;
338 - font-size: 13px;
339 - font-weight: 700;
340 - line-height: 1.2;
341 -}
342 -
343 -.contrast-tags span::before {
344 - content: "";
345 - width: 7px;
346 - height: 7px;
347 - margin-right: 8px;
348 - border-radius: 50%;
349 - background: @brand;
350 - box-shadow: 0 0 0 4px fade(@brand, 18%);
351 -}
352 -
353 -.contrast-support {
354 - max-width: 860px;
355 - margin: 30px auto 0;
356 - color: #D9E3EE;
357 - text-align: center;
358 - font-size: 15px;
359 - line-height: 1.7;
360 -}
361 -
362 -@media (max-width: 640px) {
363 - .contrast-band {
364 - padding: 40px 0;
269 + li {
270 + display: flex;
271 + align-items: center;
272 + gap: 7px;
365 365   }
366 366  
367 - .contrast-tags span {
368 - font-size: 12px;
369 - padding: 8px 11px;
275 + i {
276 + color: @brand;
370 370   }
371 371  }
372 372  
373 -
374 374  /* ========== Reusable Grids ========== */
375 375  
376 376  .card-grid,
... ... @@ -527,6 +527,80 @@
527 527   }
528 528  }
529 529  
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 +
530 530  /* ========== Services ========== */
531 531  
532 532  .services {
... ... @@ -757,8 +757,8 @@
757 757  
758 758  /* ========== CTA ========== */
759 759  
760 -#mainContentArea .cta-section {
761 - padding: 44px 0 56px;
740 +.cta-section {
741 + padding: @section-padding;
762 762  
763 763   .contact-inline {
764 764   margin: 0;
... ... @@ -770,70 +770,25 @@
770 770   }
771 771  }
772 772  
773 -#mainContentArea .cta-panel {
774 - position: relative;
775 - overflow: hidden;
776 - max-width: 1040px;
753 +.cta-panel {
754 + max-width: 860px;
777 777   margin: 0 auto;
778 - padding: 48px 40px;
779 - border: 0;
780 - border-radius: 26px;
781 - background:
782 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
783 - linear-gradient(135deg, @text 0%, @text-soft 100%);
784 - color: #fff;
785 - box-shadow: @shadow;
756 + padding: 32px;
757 + border-radius: @radius;
758 + border: 1px solid fade(@brand, 20%);
759 + box-shadow: @shadow-sm;
786 786   text-align: center;
787 -}
788 788  
789 -#mainContentArea .cta-panel::before {
790 - content: "";
791 - position: absolute;
792 - inset: 0;
793 - background:
794 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
795 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
796 - background-size: 48px 48px;
797 - opacity: .4;
798 - pointer-events: none;
799 -}
762 + h2 {
763 + margin-top: 0;
764 + }
800 800  
801 -#mainContentArea .cta-panel h2,
802 -#mainContentArea .cta-panel p,
803 -#mainContentArea .cta-panel .btn {
804 - position: relative;
805 - z-index: 1;
766 + p {
767 + color: @muted;
768 + line-height: 1.55;
769 + }
806 806  }
807 807  
808 -#mainContentArea .cta-panel h2 {
809 - max-width: 760px;
810 - margin: 0 auto 16px;
811 - color: #fff;
812 -}
813 -
814 -#mainContentArea .cta-panel p {
815 - max-width: 760px;
816 - margin: 0 auto 28px;
817 - color: #DBE4EF;
818 - font-size: 16px;
819 - line-height: 1.6;
820 -}
821 -
822 -#mainContentArea .cta-panel .btn-primary {
823 - border-color: #fff;
824 - background: #fff;
825 - color: @text;
826 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
827 -}
828 -
829 -#mainContentArea .cta-panel .btn-primary:hover,
830 -#mainContentArea .cta-panel .btn-primary:focus {
831 - border-color: #fff;
832 - background: #fff;
833 - color: @brand-strong;
834 - text-decoration: none;
835 -}
836 -
837 837  .resource-inline-cta {
838 838   display: flex;
839 839   align-items: center;
... ... @@ -965,14 +965,9 @@
965 965   gap: 14px;
966 966   }
967 967  
968 - #mainContentArea .cta-panel {
969 - padding: 30px 22px;
970 - border-radius: 20px;
903 + .cta-panel {
904 + padding: 24px 20px;
971 971   }
972 -
973 - #mainContentArea .cta-panel .btn-primary {
974 - width: 100%;
975 - }
976 976  }
977 977  
978 978  /* ========== Resource / Article Pages ========== */
... ... @@ -1672,6 +1672,39 @@
1672 1672   background-attachment: fixed;
1673 1673  }
1674 1674  
1605 +/* Let the body background show through the XWiki wrappers.
1606 +#mainContentArea,
1607 +.resource-page,
1608 +.resources-index-page {
1609 + background: transparent !important;
1610 + background-image: none !important;
1611 +}
1612 +*/
1613 +/* Remove local decorative backgrounds that compete with the global gradient.
1614 +.hero,
1615 +.hero.hero-centered,
1616 +.trust-strip,
1617 +.industry-trust-section,
1618 +.split-section,
1619 +.resource-strip,
1620 +.homepage-resource-strip,
1621 +.resource-header,
1622 +.product-section-muted,
1623 +.resources-index-page {
1624 + background: transparent !important;
1625 + background-image: none !important;
1626 +}
1627 + */
1628 +/* Keep large panels readable, but remove their inner gradients.
1629 +.industry-trust-section .industry-trust-panel,
1630 +.cta-panel,
1631 +.resource-inline-cta,
1632 +.resource-note,
1633 +.resource-cta {
1634 + background: #fff !important;
1635 + background-image: none !important;
1636 +} */
1637 +
1675 1675  /* ========== Main Page Hero / SaaS Layout ========== */
1676 1676  
1677 1677  #mainContentArea .hero.hero-saas {
... ... @@ -1848,86 +1848,33 @@
1848 1848   }
1849 1849  }
1850 1850  
1851 -/* ========== Accessibility / Contrast Improvements ========== */
1852 -
1853 -/* Keep the article area readable while preserving the page background around it. */
1854 -/*#mainContentArea .resource-layout {
1855 - padding: 28px;
1856 - border: 1px solid fade(@line, 85%);
1857 - border-radius: @radius;
1858 - background: rgba(255, 255, 255, .88);
1859 - box-shadow: @shadow-sm;
1860 -}*/
1861 -
1862 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1863 -#mainContentArea .widget,
1864 -#mainContentArea .pathway-card,
1865 -#mainContentArea .service-card,
1866 -#mainContentArea .resource-card,
1867 -#mainContentArea .services .service,
1868 -#mainContentArea .product-card,
1869 -#mainContentArea .product-feature,
1870 -#mainContentArea .product-summary-card,
1871 -#mainContentArea .product-info-card {
1872 - background: #fff;
1814 +#mainContentArea .resource-content .resources-grid .resource-card {
1815 + display: grid;
1816 + grid-template-columns: 44px minmax(0, 1fr);
1817 + column-gap: 14px;
1818 + align-items: center;
1873 1873  }
1874 1874  
1875 -/* Make notes more readable and visually stronger. */
1876 -#mainContentArea .resource-note {
1877 - border: 1px solid fade(@brand, 18%);
1878 - border-left: 4px solid @brand;
1879 - background: #fff;
1880 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1821 +#mainContentArea .resource-content .resources-grid .resource-card .service-icon {
1822 + grid-column: 1;
1823 + grid-row: 1;
1824 + margin: 0;
1881 1881  }
1882 1882  
1883 -/* Keep the sidebar clearly separated from the background. */
1884 -#mainContentArea .resource-sidebar {
1885 - background: #fff;
1827 +#mainContentArea .resource-content .resources-grid .resource-card .service-body {
1828 + display: contents;
1886 1886  }
1887 1887  
1888 -/* Make CTA panels stand out more clearly. */
1889 -#mainContentArea .resource-cta,
1890 -#mainContentArea .resource-inline-cta {
1891 - background: #fff;
1831 +#mainContentArea .resource-content .resources-grid .resource-card .service-body h4 {
1832 + grid-column: 2;
1833 + grid-row: 1;
1834 + align-self: center;
1835 + margin: 0;
1892 1892  }
1893 1893  
1894 -/* Improve table readability on long resource pages. */
1895 -#mainContentArea .resource-content table {
1896 - background: #fff;
1838 +#mainContentArea .resource-content .resources-grid .resource-card .service-body p {
1839 + grid-column: 1 / -1;
1840 + grid-row: 2;
1841 + margin: 14px 0 0;
1897 1897  }
1898 1898  
1899 -#mainContentArea .resource-content table th {
1900 - color: @text;
1901 - background: #F8FAFC;
1902 -}
1903 -
1904 -#mainContentArea .resource-content table td {
1905 - color: @text-soft;
1906 -}
1907 -
1908 -/* Slightly improve paragraph/list contrast in long articles. */
1909 -#mainContentArea .resource-content p,
1910 -#mainContentArea .resource-content li {
1911 - color: @text-soft;
1912 -}
1913 -
1914 -#mainContentArea .resource-content .resource-note p,
1915 -#mainContentArea .resource-content .resource-checklist li,
1916 -#mainContentArea .resource-content .process-list li {
1917 - color: @muted;
1918 -}
1919 -
1920 -@media (max-width: 900px) {
1921 - #mainContentArea .resource-layout {
1922 - padding: 22px;
1923 - }
1924 -}
1925 -
1926 -@media (max-width: 640px) {
1927 - #mainContentArea .resource-layout {
1928 - padding: 18px;
1929 - border-radius: 14px;
1930 - }
1931 -}
1932 -
1933 -