Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 25.11
edited by Agnease
on 2026/06/30 11:07
Change comment: There is no comment for this version
To version 28.22
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
... ... @@ -1,18 +1,30 @@
1 1  /* ========== Agnease Public Website ========== */
2 -
3 -
4 -@brand: #00937D;
2 +/*
3 +@brand: #00937D;
5 5  @brand-strong: #007B6A;
6 -@brand-bg: #F7F9FC;
7 -@text: #07182D;
8 -@text-soft: #10243D;
9 -@muted: #64748B;
10 -@line: #E6EBF2;
11 -@radius: 18px;
12 -@shadow-sm: 0 18px 45px rgba(15, 23, 42, .06);
13 -@shadow: 0 30px 80px rgba(15, 23, 42, .12);
14 -@maxw: 1240px;
15 -/* */
5 +@brand-soft: #E7FFF8;
6 +@brand-bg: #F4FCFA;
7 +@text: #2D3A34;
8 +@muted: #5B6B64;
9 +@line: #E4ECE9;
10 +@radius: 16px;
11 +@shadow-sm: 0 6px 20px rgba(0, 0, 0, .06);
12 +@shadow: 0 12px 36px rgba(0, 0, 0, .08);
13 +@maxw: 1140px;
14 +*/
15 +@brand: #00937D;
16 +@brand-strong: #007B6A;
17 +@brand-soft: #E7FFF8;
18 +@brand-bg: #F7F9FC;
19 +@text: #07182D;
20 +@text-soft: #10243D;
21 +@muted: #64748B;
22 +@line: #E6EBF2;
23 +@radius: 18px;
24 +@shadow-sm: 0 18px 45px rgba(15, 23, 42, .06);
25 +@shadow: 0 30px 80px rgba(15, 23, 42, .12);
26 +@maxw: 1140px;
27 +
16 16  @section-padding: 30px 0;
17 17  @section-padding-mobile: 28px 0;
18 18  
... ... @@ -138,7 +138,7 @@
138 138  
139 139  /* ========== Buttons ========== */
140 140  
141 -.btn-primary {
153 +/*.btn-primary {
142 142   background: @brand;
143 143   border-color: @brand;
144 144   color: #fff;
... ... @@ -150,18 +150,12 @@
150 150   color: #fff;
151 151   }
152 152  }
153 -
165 +*/
154 154  .btn-secondary {
155 - color: @brand;
167 + color: @text;
156 156   background: #fff;
157 - border: 1px solid fade(@brand, 35%);
169 + border: 1px solid fade(@text, 35%);
158 158  
159 - &:hover,
160 - &:focus {
161 - color: @brand-strong;
162 - border-color: @brand;
163 - background: @brand-bg;
164 - }
165 165  }
166 166  
167 167  /* ========== Hero ========== */
... ... @@ -173,9 +173,6 @@
173 173  
174 174   &.hero-centered {
175 175   text-align: center;
176 - background:
177 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
178 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
179 179   display: flex;
180 180   align-items: center;
181 181   justify-content: center;
... ... @@ -244,35 +244,109 @@
244 244   margin-top: 22px;
245 245  }
246 246  
247 -/* ========== Trust Strip ========== */
250 +/* ========== Contrast Band ========== */
248 248  
249 -.trust-strip {
250 - padding: 18px 0;
251 - border-top: 1px solid @line;
252 - background: #fff;
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;
253 253  
254 - ul {
255 - 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;
256 256   margin: 0 auto;
257 - padding: 0;
258 - list-style: none;
259 - display: flex;
260 - justify-content: center;
261 - gap: 22px;
262 - flex-wrap: wrap;
263 - color: @muted;
264 - font-size: 13px;
285 + text-align: center;
265 265   }
266 266  
267 - li {
268 - 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 +
302 +
303 +.contrast-tags {
304 + max-width: 940px;
305 + margin: 0 auto;
306 + display: flex;
307 + flex-wrap: wrap;
308 + justify-content: center;
309 + gap: 10px;
310 +
311 + span {
312 + display: inline-flex;
269 269   align-items: center;
270 - gap: 7px;
314 + padding: 8px 13px;
315 + border: 1px solid fade(#fff, 18%);
316 + border-radius: 999px;
317 + background: fade(#fff, 8%);
318 + color: #F8FAFC;
319 + font-size: 13px;
320 + font-weight: 700;
321 + line-height: 1.2;
322 +
323 + &::before {
324 + content: "";
325 + width: 7px;
326 + height: 7px;
327 + margin-right: 8px;
328 + border-radius: 50%;
329 + background: @brand;
330 + box-shadow: 0 0 0 4px fade(@brand, 18%);
331 + }
271 271   }
333 +}
272 272  
273 - i {
274 - color: @brand;
335 +.contrast-support {
336 + max-width: 860px;
337 + margin: 30px auto 0;
338 + color: #D9E3EE;
339 + text-align: center;
340 + font-size: 15px;
341 + line-height: 1.7;
342 +}
343 +
344 +@media (max-width: 640px) {
345 + .contrast-band {
346 + padding: 40px 0;
275 275   }
348 +
349 + .contrast-tags span {
350 + font-size: 12px;
351 + padding: 8px 11px;
352 + }
276 276  }
277 277  
278 278  /* ========== Reusable Grids ========== */
... ... @@ -322,7 +322,6 @@
322 322  .pathway-card,
323 323  .service-card,
324 324  .resource-card {
325 - background: #fff;
326 326   border: 1px solid @line;
327 327   border-radius: @radius;
328 328   box-shadow: @shadow-sm;
... ... @@ -518,7 +518,6 @@
518 518   align-items: flex-start;
519 519   gap: 16px;
520 520   padding: 22px;
521 - background: #fff;
522 522   border: 1px solid @line;
523 523   border-radius: @radius;
524 524   box-shadow: @shadow-sm;
... ... @@ -606,7 +606,6 @@
606 606   position: relative;
607 607   padding: 16px 16px 16px 58px;
608 608   margin-bottom: 12px;
609 - background: #fff;
610 610   border: 1px solid @line;
611 611   border-radius: @radius;
612 612   box-shadow: @shadow-sm;
... ... @@ -738,8 +738,8 @@
738 738  
739 739  /* ========== CTA ========== */
740 740  
741 -.cta-section {
742 - padding: @section-padding;
815 +#mainContentArea .cta-section {
816 + padding: 44px 0 56px;
743 743  
744 744   .contact-inline {
745 745   margin: 0;
... ... @@ -751,27 +751,70 @@
751 751   }
752 752  }
753 753  
754 -.cta-panel {
755 - max-width: 860px;
828 +#mainContentArea .cta-panel {
829 + position: relative;
830 + overflow: hidden;
831 + max-width: 1040px;
756 756   margin: 0 auto;
757 - padding: 32px;
758 - border-radius: @radius;
759 - border: 1px solid fade(@brand, 20%);
833 + padding: 48px 40px;
834 + border: 0;
835 + border-radius: 26px;
760 760   background:
761 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
762 - box-shadow: @shadow-sm;
837 + radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
838 + linear-gradient(135deg, @text 0%, @text-soft 100%);
839 + color: #fff;
840 + box-shadow: @shadow;
763 763   text-align: center;
842 +}
764 764  
765 - h2 {
766 - margin-top: 0;
767 - }
844 +#mainContentArea .cta-panel::before {
845 + content: "";
846 + position: absolute;
847 + inset: 0;
848 + background:
849 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
850 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
851 + background-size: 48px 48px;
852 + opacity: .4;
853 + pointer-events: none;
854 +}
768 768  
769 - p {
770 - color: @muted;
771 - line-height: 1.55;
772 - }
856 +#mainContentArea .cta-panel h2,
857 +#mainContentArea .cta-panel p,
858 +#mainContentArea .cta-panel .btn {
859 + position: relative;
860 + z-index: 1;
773 773  }
774 774  
863 +#mainContentArea .cta-panel h2 {
864 + max-width: 760px;
865 + margin: 0 auto 16px;
866 + color: #fff;
867 +}
868 +
869 +#mainContentArea .cta-panel p {
870 + max-width: 760px;
871 + margin: 0 auto 28px;
872 + color: #DBE4EF;
873 + font-size: 16px;
874 + line-height: 1.6;
875 +}
876 +
877 +#mainContentArea .cta-panel .btn-primary {
878 + border-color: #fff;
879 + background: #fff;
880 + color: @text;
881 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
882 +}
883 +
884 +#mainContentArea .cta-panel .btn-primary:hover,
885 +#mainContentArea .cta-panel .btn-primary:focus {
886 + border-color: #fff;
887 + background: #fff;
888 + color: @brand-strong;
889 + text-decoration: none;
890 +}
891 +
775 775  .resource-inline-cta {
776 776   display: flex;
777 777   align-items: center;
... ... @@ -903,9 +903,14 @@
903 903   gap: 14px;
904 904   }
905 905  
906 - .cta-panel {
907 - padding: 24px 20px;
1023 + #mainContentArea .cta-panel {
1024 + padding: 30px 22px;
1025 + border-radius: 20px;
908 908   }
1027 +
1028 + #mainContentArea .cta-panel .btn-primary {
1029 + width: 100%;
1030 + }
909 909  }
910 910  
911 911  /* ========== Resource / Article Pages ========== */
... ... @@ -917,9 +917,6 @@
917 917  .resource-header {
918 918   padding: @section-padding;
919 919   border-top: none;
920 - background:
921 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
922 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
923 923  
924 924   h1 {
925 925   margin: 0 auto 14px;
... ... @@ -1067,7 +1067,6 @@
1067 1067   border: 1px solid @line;
1068 1068   border-radius: @radius;
1069 1069   padding: 18px;
1070 - background: #fff;
1071 1071   box-shadow: @shadow-sm;
1072 1072  
1073 1073   h4 {
... ... @@ -1166,7 +1166,6 @@
1166 1166  
1167 1167  .product-card {
1168 1168   position: relative;
1169 - background: #fff;
1170 1170   border: 1px solid @line;
1171 1171   border-radius: @radius;
1172 1172   box-shadow: @shadow-sm;
... ... @@ -1316,7 +1316,6 @@
1316 1316  .product-info-card,
1317 1317  .product-feature,
1318 1318  .product-gallery-panel {
1319 - background: #fff;
1320 1320   border: 1px solid @line;
1321 1321   border-radius: @radius;
1322 1322   box-shadow: @shadow-sm;
... ... @@ -1559,7 +1559,6 @@
1559 1559  /* ========== Resources Index ========== */
1560 1560  
1561 1561  .resources-index-page {
1562 - background: #fff;
1563 1563  
1564 1564   .services-grid {
1565 1565   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1595,3 +1595,321 @@
1595 1595   color: @muted;
1596 1596   }
1597 1597  }
1713 +
1714 +/* ========== Global Theme Background ========== */
1715 +
1716 +html,
1717 +body {
1718 + min-height: 100%;
1719 +}
1720 +
1721 +body {
1722 + color: @text;
1723 + background:
1724 + radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%),
1725 + radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%),
1726 + linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1727 + background-attachment: fixed;
1728 +}
1729 +
1730 +/* Let the body background show through the XWiki wrappers.
1731 +#mainContentArea,
1732 +.resource-page,
1733 +.resources-index-page {
1734 + background: transparent !important;
1735 + background-image: none !important;
1736 +}
1737 +*/
1738 +/* Remove local decorative backgrounds that compete with the global gradient.
1739 +.hero,
1740 +.hero.hero-centered,
1741 +.trust-strip,
1742 +.industry-trust-section,
1743 +.split-section,
1744 +.resource-strip,
1745 +.homepage-resource-strip,
1746 +.resource-header,
1747 +.product-section-muted,
1748 +.resources-index-page {
1749 + background: transparent !important;
1750 + background-image: none !important;
1751 +}
1752 + */
1753 +/* Keep large panels readable, but remove their inner gradients.
1754 +.industry-trust-section .industry-trust-panel,
1755 +.cta-panel,
1756 +.resource-inline-cta,
1757 +.resource-note,
1758 +.resource-cta {
1759 + background: #fff !important;
1760 + background-image: none !important;
1761 +} */
1762 +
1763 +/* ========== Main Page Hero / SaaS Layout ========== */
1764 +
1765 +#mainContentArea .hero.hero-saas {
1766 + min-height: auto;
1767 + padding: 60px 0 34px;
1768 + display: flex;
1769 + align-items: center;
1770 + overflow: hidden;
1771 + background: transparent;
1772 +}
1773 +
1774 +#mainContentArea .hero-layout {
1775 + max-width: 1120px;
1776 + margin: 0 auto;
1777 + display: grid;
1778 + grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1779 + gap: 56px;
1780 + align-items: center;
1781 +}
1782 +
1783 +#mainContentArea .hero-copy {
1784 + min-width: 0;
1785 + text-align: left;
1786 +}
1787 +
1788 +#mainContentArea .hero.hero-saas h1 {
1789 + max-width: 640px;
1790 + margin: 0 0 26px;
1791 + font-size: 60px;
1792 + font-weight: 800;
1793 + line-height: 1;
1794 + letter-spacing: -3px;
1795 +}
1796 +
1797 +#mainContentArea .hero.hero-saas h1 span {
1798 + color: @brand;
1799 +}
1800 +
1801 +#mainContentArea .hero.hero-saas .lead {
1802 + max-width: 590px;
1803 + margin: 0 0 28px;
1804 + color: #334155;
1805 + text-align: left;
1806 + font-size: 18px;
1807 + line-height: 1.6;
1808 +}
1809 +
1810 +#mainContentArea .hero.hero-saas .benefits {
1811 + max-width: 620px;
1812 + margin: 0 0 30px;
1813 + padding: 0;
1814 + display: grid;
1815 + grid-template-columns: repeat(2, minmax(0, 1fr));
1816 + gap: 10px 24px;
1817 + list-style: none;
1818 + color: #475569;
1819 + font-size: 15px;
1820 + text-align: left;
1821 +}
1822 +
1823 +#mainContentArea .hero.hero-saas .benefits li {
1824 + display: grid;
1825 + grid-template-columns: 18px minmax(0, 1fr);
1826 + column-gap: 8px;
1827 + align-items: start;
1828 + margin: 0;
1829 + line-height: 1.45;
1830 +}
1831 +
1832 +#mainContentArea .hero.hero-saas .benefits li::before {
1833 + content: "✓";
1834 + display: block;
1835 + width: 18px;
1836 + color: @brand;
1837 + font-weight: 900;
1838 + line-height: 1.45;
1839 + text-align: left;
1840 + margin: 0;
1841 +}
1842 +
1843 +#mainContentArea .hero.hero-saas .hero-actions,
1844 +#mainContentArea .hero.hero-saas #hero-cta {
1845 + display: flex;
1846 + flex-wrap: wrap;
1847 + justify-content: flex-start;
1848 + gap: 12px;
1849 + margin-top: 0;
1850 +}
1851 +
1852 +#mainContentArea .hero-image-wrapper {
1853 + min-width: 0;
1854 + display: flex;
1855 + justify-content: center;
1856 + align-items: center;
1857 +}
1858 +
1859 +#mainContentArea .hero-image {
1860 + display: block;
1861 + width: 100%;
1862 + max-width: 620px;
1863 + height: auto;
1864 + border: 0;
1865 +}
1866 +
1867 +/* ========== Main Page Hero Responsive ========== */
1868 +
1869 +@media (max-width: 1100px) {
1870 + #mainContentArea .hero-layout {
1871 + max-width: 760px;
1872 + grid-template-columns: 1fr;
1873 + gap: 34px;
1874 + }
1875 +
1876 + #mainContentArea .hero-copy {
1877 + order: 1;
1878 + text-align: center;
1879 + }
1880 +
1881 + #mainContentArea .hero-image-wrapper {
1882 + order: 2;
1883 + }
1884 +
1885 + #mainContentArea .hero.hero-saas h1 {
1886 + margin-left: auto;
1887 + margin-right: auto;
1888 + text-align: center;
1889 + }
1890 +
1891 + #mainContentArea .hero.hero-saas .lead {
1892 + margin-left: auto;
1893 + margin-right: auto;
1894 + text-align: center;
1895 + }
1896 +
1897 + #mainContentArea .hero.hero-saas .benefits {
1898 + margin-left: auto;
1899 + margin-right: auto;
1900 + }
1901 +
1902 + #mainContentArea .hero.hero-saas .hero-actions,
1903 + #mainContentArea .hero.hero-saas #hero-cta {
1904 + justify-content: center;
1905 + }
1906 +
1907 + #mainContentArea .hero-image {
1908 + max-width: 620px;
1909 + }
1910 +}
1911 +
1912 +@media (max-width: 640px) {
1913 + #mainContentArea .hero.hero-saas {
1914 + padding: 42px 0 28px;
1915 + }
1916 +
1917 + #mainContentArea .hero-layout {
1918 + gap: 28px;
1919 + }
1920 +
1921 + #mainContentArea .hero.hero-saas h1 {
1922 + font-size: 42px;
1923 + letter-spacing: -1.5px;
1924 + }
1925 +
1926 + #mainContentArea .hero.hero-saas .lead {
1927 + font-size: 17px;
1928 + }
1929 +
1930 + #mainContentArea .hero.hero-saas .benefits {
1931 + grid-template-columns: 1fr;
1932 + }
1933 +
1934 + #mainContentArea .hero-image {
1935 + max-width: 100%;
1936 + }
1937 +}
1938 +
1939 +/* ========== Accessibility / Contrast Improvements ========== */
1940 +
1941 +/* Make the global background softer and less distracting. */
1942 +body {
1943 + background:
1944 + radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1945 + radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1946 + linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1947 + background-attachment: scroll;
1948 +}
1949 +
1950 +/* Keep the article area readable while preserving the page background around it. */
1951 +#mainContentArea .resource-layout {
1952 + padding: 28px;
1953 + border: 1px solid fade(@line, 85%);
1954 + border-radius: @radius;
1955 + background: rgba(255, 255, 255, .88);
1956 + box-shadow: @shadow-sm;
1957 +}
1958 +
1959 +/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1960 +#mainContentArea .widget,
1961 +#mainContentArea .pathway-card,
1962 +#mainContentArea .service-card,
1963 +#mainContentArea .resource-card,
1964 +#mainContentArea .services .service,
1965 +#mainContentArea .product-card,
1966 +#mainContentArea .product-feature,
1967 +#mainContentArea .product-summary-card,
1968 +#mainContentArea .product-info-card {
1969 + background: #fff;
1970 +}
1971 +
1972 +/* Make notes more readable and visually stronger. */
1973 +#mainContentArea .resource-note {
1974 + border: 1px solid fade(@brand, 18%);
1975 + border-left: 4px solid @brand;
1976 + background: #fff;
1977 + box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1978 +}
1979 +
1980 +/* Keep the sidebar clearly separated from the background. */
1981 +#mainContentArea .resource-sidebar {
1982 + background: #fff;
1983 +}
1984 +
1985 +/* Make CTA panels stand out more clearly. */
1986 +#mainContentArea .resource-cta,
1987 +#mainContentArea .resource-inline-cta {
1988 + background: #fff;
1989 +}
1990 +
1991 +/* Improve table readability on long resource pages. */
1992 +#mainContentArea .resource-content table {
1993 + background: #fff;
1994 +}
1995 +
1996 +#mainContentArea .resource-content table th {
1997 + color: @text;
1998 + background: #F8FAFC;
1999 +}
2000 +
2001 +#mainContentArea .resource-content table td {
2002 + color: @text-soft;
2003 +}
2004 +
2005 +/* Slightly improve paragraph/list contrast in long articles. */
2006 +#mainContentArea .resource-content p,
2007 +#mainContentArea .resource-content li {
2008 + color: @text-soft;
2009 +}
2010 +
2011 +#mainContentArea .resource-content .resource-note p,
2012 +#mainContentArea .resource-content .resource-checklist li,
2013 +#mainContentArea .resource-content .process-list li {
2014 + color: @muted;
2015 +}
2016 +
2017 +@media (max-width: 900px) {
2018 + #mainContentArea .resource-layout {
2019 + padding: 22px;
2020 + }
2021 +}
2022 +
2023 +@media (max-width: 640px) {
2024 + #mainContentArea .resource-layout {
2025 + padding: 18px;
2026 + border-radius: 14px;
2027 + }
2028 +}
2029 +
2030 +