Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 25.24
edited by Agnease
on 2026/06/30 11:31
Change comment: There is no comment for this version
To version 28.21
edited by Agnease
on 2026/07/03 13:08
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -2,7 +2,45 @@
2 2  #macro (displayPublicContent)
3 3   #set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome'))
4 4   {{html clean="false"}}
5 + <section class="hero hero-saas" id="top">
6 + <div class="container">
7 + <div class="hero-layout">
8 + <div class="hero-copy">
9 + <h1>Professional XWiki consulting <span>and engineering</span></h1>
5 5  
11 + <p class="lead">
12 + Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care.
13 + </p>
14 +
15 + <ul class="benefits">
16 + <li>XWiki LTS upgrades</li>
17 + <li>Maintenance and support</li>
18 + <li>Custom XWiki development</li>
19 + <li>Migrations and integrations</li>
20 + </ul>
21 +
22 + <div class="hero-actions" id="hero-cta">
23 + <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">
24 + Book a free discussion
25 + </a>
26 + <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
27 + </div>
28 + </div>
29 +
30 + <div class="hero-image-wrapper">
31 + <img
32 + class="hero-image"
33 + src="$xwiki.getDocument('PublicWebSite.WebHome').getAttachmentURL('agnease-xwiki-hero.png')"
34 + alt="Illustration of a professional XWiki platform dashboard with upgrade, security and maintenance elements"
35 + width="1200"
36 + height="900"
37 + loading="eager"
38 + />
39 + </div>
40 + </div>
41 + </div>
42 + </section>
43 +#*
6 6   <section class="hero hero-centered" aria-labelledby="hero-title">
7 7   <div class="container hero-inner">
8 8   <h1 id="hero-title">Professional XWiki consulting and engineering</h1>
... ... @@ -26,7 +26,7 @@
26 26   </div>
27 27   </div>
28 28   </section>
29 -
67 +*#
30 30   <section class="trust-strip" aria-label="Agnease experience">
31 31   <div class="container">
32 32   <ul>
... ... @@ -111,9 +111,9 @@
111 111   </div>
112 112   </section>
113 113  
114 - <section class="industry-trust-section" aria-labelledby="industry-trust-title">
152 + <section class="contrast-band" aria-labelledby="industry-trust-title">
115 115   <div class="container">
116 - <div class="industry-trust-panel">
154 + <div class="contrast-panel">
117 117   <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2>
118 118  
119 119   <p class="section-intro">
... ... @@ -121,7 +121,7 @@
121 121   government institutions, transportation, software development, compliance programs and regulated environments.
122 122   </p>
123 123  
124 - <div class="industry-tags" aria-label="Industries and environments supported">
162 + <div class="contrast-tags" aria-label="Industries and environments supported">
125 125   <span>Healthcare</span>
126 126   <span>Financial services</span>
127 127   <span>Scientific research</span>
... ... @@ -132,7 +132,7 @@
132 132   <span>Regulated environments</span>
133 133   </div>
134 134  
135 - <p class="industry-support">
173 + <p class="contrast-support">
136 136   Organizations rely on these platforms to manage documentation, workflows, compliance processes,
137 137   research knowledge and critical business information. From upgrades and authentication integrations
138 138   to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.
agnease-xwiki-hero.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.Admin
Size
... ... @@ -1,0 +1,1 @@
1 +981.8 KB
Content
XWiki.StyleSheetExtension[0]
code
... ... @@ -150,7 +150,7 @@
150 150  
151 151  /* ========== Buttons ========== */
152 152  
153 -.btn-primary {
153 +/*.btn-primary {
154 154   background: @brand;
155 155   border-color: @brand;
156 156   color: #fff;
... ... @@ -162,18 +162,12 @@
162 162   color: #fff;
163 163   }
164 164  }
165 -
165 +*/
166 166  .btn-secondary {
167 - color: @brand;
167 + color: @text;
168 168   background: #fff;
169 - border: 1px solid fade(@brand, 35%);
169 + border: 1px solid fade(@text, 35%);
170 170  
171 - &:hover,
172 - &:focus {
173 - color: @brand-strong;
174 - border-color: @brand;
175 - background: @brand-bg;
176 - }
177 177  }
178 178  
179 179  /* ========== Hero ========== */
... ... @@ -185,9 +185,6 @@
185 185  
186 186   &.hero-centered {
187 187   text-align: center;
188 - background:
189 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
190 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
191 191   display: flex;
192 192   align-items: center;
193 193   justify-content: center;
... ... @@ -256,34 +256,111 @@
256 256   margin-top: 22px;
257 257  }
258 258  
259 -/* ========== Trust Strip ========== */
250 +/* ========== Contrast Band ========== */
260 260  
261 -.trust-strip {
262 - padding: 18px 0;
263 - border-top: 1px solid @line;
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;
264 264  
265 - ul {
266 - max-width: 960px;
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;
267 267   margin: 0 auto;
268 - padding: 0;
269 - list-style: none;
270 - display: flex;
271 - justify-content: center;
272 - gap: 22px;
273 - flex-wrap: wrap;
274 - color: @muted;
275 - font-size: 13px;
285 + text-align: center;
276 276   }
277 277  
278 - li {
279 - display: flex;
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;
280 280   align-items: center;
281 - gap: 7px;
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 + }
282 282   }
335 +}
283 283  
284 - i {
285 - color: @brand;
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;
286 286   }
350 +
351 + .contrast-tags span {
352 + font-size: 12px;
353 + padding: 8px 11px;
354 + }
287 287  }
288 288  
289 289  /* ========== Reusable Grids ========== */
... ... @@ -333,7 +333,6 @@
333 333  .pathway-card,
334 334  .service-card,
335 335  .resource-card {
336 - background: #fff;
337 337   border: 1px solid @line;
338 338   border-radius: @radius;
339 339   box-shadow: @shadow-sm;
... ... @@ -529,7 +529,6 @@
529 529   align-items: flex-start;
530 530   gap: 16px;
531 531   padding: 22px;
532 - background: #fff;
533 533   border: 1px solid @line;
534 534   border-radius: @radius;
535 535   box-shadow: @shadow-sm;
... ... @@ -617,7 +617,6 @@
617 617   position: relative;
618 618   padding: 16px 16px 16px 58px;
619 619   margin-bottom: 12px;
620 - background: #fff;
621 621   border: 1px solid @line;
622 622   border-radius: @radius;
623 623   box-shadow: @shadow-sm;
... ... @@ -749,8 +749,8 @@
749 749  
750 750  /* ========== CTA ========== */
751 751  
752 -.cta-section {
753 - padding: @section-padding;
817 +#mainContentArea .cta-section {
818 + padding: 44px 0 56px;
754 754  
755 755   .contact-inline {
756 756   margin: 0;
... ... @@ -762,27 +762,70 @@
762 762   }
763 763  }
764 764  
765 -.cta-panel {
766 - max-width: 860px;
830 +#mainContentArea .cta-panel {
831 + position: relative;
832 + overflow: hidden;
833 + max-width: 1040px;
767 767   margin: 0 auto;
768 - padding: 32px;
769 - border-radius: @radius;
770 - border: 1px solid fade(@brand, 20%);
835 + padding: 48px 40px;
836 + border: 0;
837 + border-radius: 26px;
771 771   background:
772 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
773 - box-shadow: @shadow-sm;
839 + radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
840 + linear-gradient(135deg, @text 0%, @text-soft 100%);
841 + color: #fff;
842 + box-shadow: @shadow;
774 774   text-align: center;
844 +}
775 775  
776 - h2 {
777 - margin-top: 0;
778 - }
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 +}
779 779  
780 - p {
781 - color: @muted;
782 - line-height: 1.55;
783 - }
858 +#mainContentArea .cta-panel h2,
859 +#mainContentArea .cta-panel p,
860 +#mainContentArea .cta-panel .btn {
861 + position: relative;
862 + z-index: 1;
784 784  }
785 785  
865 +#mainContentArea .cta-panel h2 {
866 + max-width: 760px;
867 + margin: 0 auto 16px;
868 + color: #fff;
869 +}
870 +
871 +#mainContentArea .cta-panel p {
872 + max-width: 760px;
873 + margin: 0 auto 28px;
874 + color: #DBE4EF;
875 + font-size: 16px;
876 + line-height: 1.6;
877 +}
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 +}
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;
892 +}
893 +
786 786  .resource-inline-cta {
787 787   display: flex;
788 788   align-items: center;
... ... @@ -914,9 +914,14 @@
914 914   gap: 14px;
915 915   }
916 916  
917 - .cta-panel {
918 - padding: 24px 20px;
1025 + #mainContentArea .cta-panel {
1026 + padding: 30px 22px;
1027 + border-radius: 20px;
919 919   }
1029 +
1030 + #mainContentArea .cta-panel .btn-primary {
1031 + width: 100%;
1032 + }
920 920  }
921 921  
922 922  /* ========== Resource / Article Pages ========== */
... ... @@ -928,9 +928,6 @@
928 928  .resource-header {
929 929   padding: @section-padding;
930 930   border-top: none;
931 - background:
932 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
933 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
934 934  
935 935   h1 {
936 936   margin: 0 auto 14px;
... ... @@ -1078,7 +1078,6 @@
1078 1078   border: 1px solid @line;
1079 1079   border-radius: @radius;
1080 1080   padding: 18px;
1081 - background: #fff;
1082 1082   box-shadow: @shadow-sm;
1083 1083  
1084 1084   h4 {
... ... @@ -1177,7 +1177,6 @@
1177 1177  
1178 1178  .product-card {
1179 1179   position: relative;
1180 - background: #fff;
1181 1181   border: 1px solid @line;
1182 1182   border-radius: @radius;
1183 1183   box-shadow: @shadow-sm;
... ... @@ -1327,7 +1327,6 @@
1327 1327  .product-info-card,
1328 1328  .product-feature,
1329 1329  .product-gallery-panel {
1330 - background: #fff;
1331 1331   border: 1px solid @line;
1332 1332   border-radius: @radius;
1333 1333   box-shadow: @shadow-sm;
... ... @@ -1570,7 +1570,6 @@
1570 1570  /* ========== Resources Index ========== */
1571 1571  
1572 1572  .resources-index-page {
1573 - background: #fff;
1574 1574  
1575 1575   .services-grid {
1576 1576   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1655,3 +1655,272 @@
1655 1655   background: #fff !important;
1656 1656   background-image: none !important;
1657 1657  } */
1764 +
1765 +/* ========== Main Page Hero / SaaS Layout ========== */
1766 +
1767 +#mainContentArea .hero.hero-saas {
1768 + min-height: auto;
1769 + padding: 60px 0 34px;
1770 + display: flex;
1771 + align-items: center;
1772 + overflow: hidden;
1773 + background: transparent;
1774 +}
1775 +
1776 +#mainContentArea .hero-layout {
1777 + max-width: 1120px;
1778 + margin: 0 auto;
1779 + display: grid;
1780 + grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1781 + gap: 56px;
1782 + align-items: center;
1783 +}
1784 +
1785 +#mainContentArea .hero-copy {
1786 + min-width: 0;
1787 + text-align: left;
1788 +}
1789 +
1790 +#mainContentArea .hero.hero-saas h1 {
1791 + max-width: 640px;
1792 + margin: 0 0 26px;
1793 + font-size: 60px;
1794 + font-weight: 800;
1795 + line-height: 1;
1796 + letter-spacing: -3px;
1797 +}
1798 +
1799 +#mainContentArea .hero.hero-saas h1 span {
1800 + color: @brand;
1801 +}
1802 +
1803 +#mainContentArea .hero.hero-saas .lead {
1804 + max-width: 590px;
1805 + margin: 0 0 28px;
1806 + color: #334155;
1807 + text-align: left;
1808 + font-size: 18px;
1809 + line-height: 1.6;
1810 +}
1811 +
1812 +#mainContentArea .hero.hero-saas .benefits {
1813 + max-width: 620px;
1814 + margin: 0 0 30px;
1815 + padding: 0;
1816 + display: grid;
1817 + grid-template-columns: repeat(2, minmax(0, 1fr));
1818 + gap: 10px 24px;
1819 + list-style: none;
1820 + color: #475569;
1821 + font-size: 15px;
1822 + text-align: left;
1823 +}
1824 +
1825 +#mainContentArea .hero.hero-saas .benefits li {
1826 + display: grid;
1827 + grid-template-columns: 18px minmax(0, 1fr);
1828 + column-gap: 8px;
1829 + align-items: start;
1830 + margin: 0;
1831 + line-height: 1.45;
1832 +}
1833 +
1834 +#mainContentArea .hero.hero-saas .benefits li::before {
1835 + content: "✓";
1836 + display: block;
1837 + width: 18px;
1838 + color: @brand;
1839 + font-weight: 900;
1840 + line-height: 1.45;
1841 + text-align: left;
1842 + margin: 0;
1843 +}
1844 +
1845 +#mainContentArea .hero.hero-saas .hero-actions,
1846 +#mainContentArea .hero.hero-saas #hero-cta {
1847 + display: flex;
1848 + flex-wrap: wrap;
1849 + justify-content: flex-start;
1850 + gap: 12px;
1851 + margin-top: 0;
1852 +}
1853 +
1854 +#mainContentArea .hero-image-wrapper {
1855 + min-width: 0;
1856 + display: flex;
1857 + justify-content: center;
1858 + align-items: center;
1859 +}
1860 +
1861 +#mainContentArea .hero-image {
1862 + display: block;
1863 + width: 100%;
1864 + max-width: 620px;
1865 + height: auto;
1866 + border: 0;
1867 +}
1868 +
1869 +/* ========== Main Page Hero Responsive ========== */
1870 +
1871 +@media (max-width: 1100px) {
1872 + #mainContentArea .hero-layout {
1873 + max-width: 760px;
1874 + grid-template-columns: 1fr;
1875 + gap: 34px;
1876 + }
1877 +
1878 + #mainContentArea .hero-copy {
1879 + order: 1;
1880 + text-align: center;
1881 + }
1882 +
1883 + #mainContentArea .hero-image-wrapper {
1884 + order: 2;
1885 + }
1886 +
1887 + #mainContentArea .hero.hero-saas h1 {
1888 + margin-left: auto;
1889 + margin-right: auto;
1890 + text-align: center;
1891 + }
1892 +
1893 + #mainContentArea .hero.hero-saas .lead {
1894 + margin-left: auto;
1895 + margin-right: auto;
1896 + text-align: center;
1897 + }
1898 +
1899 + #mainContentArea .hero.hero-saas .benefits {
1900 + margin-left: auto;
1901 + margin-right: auto;
1902 + }
1903 +
1904 + #mainContentArea .hero.hero-saas .hero-actions,
1905 + #mainContentArea .hero.hero-saas #hero-cta {
1906 + justify-content: center;
1907 + }
1908 +
1909 + #mainContentArea .hero-image {
1910 + max-width: 620px;
1911 + }
1912 +}
1913 +
1914 +@media (max-width: 640px) {
1915 + #mainContentArea .hero.hero-saas {
1916 + padding: 42px 0 28px;
1917 + }
1918 +
1919 + #mainContentArea .hero-layout {
1920 + gap: 28px;
1921 + }
1922 +
1923 + #mainContentArea .hero.hero-saas h1 {
1924 + font-size: 42px;
1925 + letter-spacing: -1.5px;
1926 + }
1927 +
1928 + #mainContentArea .hero.hero-saas .lead {
1929 + font-size: 17px;
1930 + }
1931 +
1932 + #mainContentArea .hero.hero-saas .benefits {
1933 + grid-template-columns: 1fr;
1934 + }
1935 +
1936 + #mainContentArea .hero-image {
1937 + max-width: 100%;
1938 + }
1939 +}
1940 +
1941 +/* ========== Accessibility / Contrast Improvements ========== */
1942 +
1943 +/* Make the global background softer and less distracting. */
1944 +body {
1945 + background:
1946 + radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1947 + radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1948 + linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1949 + background-attachment: scroll;
1950 +}
1951 +
1952 +/* Keep the article area readable while preserving the page background around it. */
1953 +#mainContentArea .resource-layout {
1954 + padding: 28px;
1955 + border: 1px solid fade(@line, 85%);
1956 + border-radius: @radius;
1957 + background: rgba(255, 255, 255, .88);
1958 + box-shadow: @shadow-sm;
1959 +}
1960 +
1961 +/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1962 +#mainContentArea .widget,
1963 +#mainContentArea .pathway-card,
1964 +#mainContentArea .service-card,
1965 +#mainContentArea .resource-card,
1966 +#mainContentArea .services .service,
1967 +#mainContentArea .product-card,
1968 +#mainContentArea .product-feature,
1969 +#mainContentArea .product-summary-card,
1970 +#mainContentArea .product-info-card {
1971 + background: #fff;
1972 +}
1973 +
1974 +/* Make notes more readable and visually stronger. */
1975 +#mainContentArea .resource-note {
1976 + border: 1px solid fade(@brand, 18%);
1977 + border-left: 4px solid @brand;
1978 + background: #fff;
1979 + box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1980 +}
1981 +
1982 +/* Keep the sidebar clearly separated from the background. */
1983 +#mainContentArea .resource-sidebar {
1984 + background: #fff;
1985 +}
1986 +
1987 +/* Make CTA panels stand out more clearly. */
1988 +#mainContentArea .resource-cta,
1989 +#mainContentArea .resource-inline-cta {
1990 + background: #fff;
1991 +}
1992 +
1993 +/* Improve table readability on long resource pages. */
1994 +#mainContentArea .resource-content table {
1995 + background: #fff;
1996 +}
1997 +
1998 +#mainContentArea .resource-content table th {
1999 + color: @text;
2000 + background: #F8FAFC;
2001 +}
2002 +
2003 +#mainContentArea .resource-content table td {
2004 + color: @text-soft;
2005 +}
2006 +
2007 +/* Slightly improve paragraph/list contrast in long articles. */
2008 +#mainContentArea .resource-content p,
2009 +#mainContentArea .resource-content li {
2010 + color: @text-soft;
2011 +}
2012 +
2013 +#mainContentArea .resource-content .resource-note p,
2014 +#mainContentArea .resource-content .resource-checklist li,
2015 +#mainContentArea .resource-content .process-list li {
2016 + color: @muted;
2017 +}
2018 +
2019 +@media (max-width: 900px) {
2020 + #mainContentArea .resource-layout {
2021 + padding: 22px;
2022 + }
2023 +}
2024 +
2025 +@media (max-width: 640px) {
2026 + #mainContentArea .resource-layout {
2027 + padding: 18px;
2028 + border-radius: 14px;
2029 + }
2030 +}
2031 +
2032 +