Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.21
edited by Agnease
on 2026/07/03 13:08
Change comment: There is no comment for this version
To version 25.1
edited by Agnease
on 2026/06/29 13:22
Change comment: Imported from XAR

Summary

Details

Page properties
Content
... ... @@ -2,45 +2,7 @@
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>
10 10  
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 -#*
44 44   <section class="hero hero-centered" aria-labelledby="hero-title">
45 45   <div class="container hero-inner">
46 46   <h1 id="hero-title">Professional XWiki consulting and engineering</h1>
... ... @@ -64,7 +64,7 @@
64 64   </div>
65 65   </div>
66 66   </section>
67 -*#
29 +
68 68   <section class="trust-strip" aria-label="Agnease experience">
69 69   <div class="container">
70 70   <ul>
... ... @@ -149,9 +149,9 @@
149 149   </div>
150 150   </section>
151 151  
152 - <section class="contrast-band" aria-labelledby="industry-trust-title">
114 + <section class="industry-trust-section" aria-labelledby="industry-trust-title">
153 153   <div class="container">
154 - <div class="contrast-panel">
116 + <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">
124 + <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">
135 + <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.
agnease-xwiki-hero.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Admin
Size
... ... @@ -1,1 +1,0 @@
1 -981.8 KB
Content
XWiki.StyleSheetExtension[0]
code
... ... @@ -1,5 +1,5 @@
1 1  /* ========== Agnease Public Website ========== */
2 -/*
2 +
3 3  @brand: #00937D;
4 4  @brand-strong: #007B6A;
5 5  @brand-soft: #E7FFF8;
... ... @@ -11,19 +11,6 @@
11 11  @shadow-sm: 0 6px 20px rgba(0, 0, 0, .06);
12 12  @shadow: 0 12px 36px rgba(0, 0, 0, .08);
13 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 27  
28 28  @section-padding: 30px 0;
29 29  @section-padding-mobile: 28px 0;
... ... @@ -150,7 +150,7 @@
150 150  
151 151  /* ========== Buttons ========== */
152 152  
153 -/*.btn-primary {
140 +.btn-primary {
154 154   background: @brand;
155 155   border-color: @brand;
156 156   color: #fff;
... ... @@ -162,12 +162,18 @@
162 162   color: #fff;
163 163   }
164 164  }
165 -*/
152 +
166 166  .btn-secondary {
167 - color: @text;
154 + color: @brand;
168 168   background: #fff;
169 - border: 1px solid fade(@text, 35%);
156 + border: 1px solid fade(@brand, 35%);
170 170  
158 + &:hover,
159 + &:focus {
160 + color: @brand-strong;
161 + border-color: @brand;
162 + background: @brand-bg;
163 + }
171 171  }
172 172  
173 173  /* ========== Hero ========== */
... ... @@ -179,6 +179,9 @@
179 179  
180 180   &.hero-centered {
181 181   text-align: center;
175 + background:
176 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
177 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
182 182   display: flex;
183 183   align-items: center;
184 184   justify-content: center;
... ... @@ -247,111 +247,35 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Contrast Band ========== */
246 +/* ========== Trust Strip ========== */
251 251  
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;
248 +.trust-strip {
249 + padding: 18px 0;
250 + border-top: 1px solid @line;
251 + background: #fff;
264 264  
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;
253 + ul {
254 + max-width: 960px;
284 284   margin: 0 auto;
285 - text-align: center;
256 + padding: 0;
257 + list-style: none;
258 + display: flex;
259 + justify-content: center;
260 + gap: 22px;
261 + flex-wrap: wrap;
262 + color: @muted;
263 + font-size: 13px;
286 286   }
287 287  
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;
266 + li {
267 + display: flex;
315 315   align-items: center;
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 - }
269 + gap: 7px;
334 334   }
335 -}
336 336  
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;
272 + i {
273 + color: @brand;
349 349   }
350 -
351 - .contrast-tags span {
352 - font-size: 12px;
353 - padding: 8px 11px;
354 - }
355 355  }
356 356  
357 357  /* ========== Reusable Grids ========== */
... ... @@ -401,6 +401,7 @@
401 401  .pathway-card,
402 402  .service-card,
403 403  .resource-card {
324 + background: #fff;
404 404   border: 1px solid @line;
405 405   border-radius: @radius;
406 406   box-shadow: @shadow-sm;
... ... @@ -596,6 +596,7 @@
596 596   align-items: flex-start;
597 597   gap: 16px;
598 598   padding: 22px;
520 + background: #fff;
599 599   border: 1px solid @line;
600 600   border-radius: @radius;
601 601   box-shadow: @shadow-sm;
... ... @@ -683,6 +683,7 @@
683 683   position: relative;
684 684   padding: 16px 16px 16px 58px;
685 685   margin-bottom: 12px;
608 + background: #fff;
686 686   border: 1px solid @line;
687 687   border-radius: @radius;
688 688   box-shadow: @shadow-sm;
... ... @@ -814,8 +814,8 @@
814 814  
815 815  /* ========== CTA ========== */
816 816  
817 -#mainContentArea .cta-section {
818 - padding: 44px 0 56px;
740 +.cta-section {
741 + padding: @section-padding;
819 819  
820 820   .contact-inline {
821 821   margin: 0;
... ... @@ -827,70 +827,27 @@
827 827   }
828 828  }
829 829  
830 -#mainContentArea .cta-panel {
831 - position: relative;
832 - overflow: hidden;
833 - max-width: 1040px;
753 +.cta-panel {
754 + max-width: 860px;
834 834   margin: 0 auto;
835 - padding: 48px 40px;
836 - border: 0;
837 - border-radius: 26px;
756 + padding: 32px;
757 + border-radius: @radius;
758 + border: 1px solid fade(@brand, 20%);
838 838   background:
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;
760 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
761 + box-shadow: @shadow-sm;
843 843   text-align: center;
844 -}
845 845  
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 -}
764 + h2 {
765 + margin-top: 0;
766 + }
857 857  
858 -#mainContentArea .cta-panel h2,
859 -#mainContentArea .cta-panel p,
860 -#mainContentArea .cta-panel .btn {
861 - position: relative;
862 - z-index: 1;
768 + p {
769 + color: @muted;
770 + line-height: 1.55;
771 + }
863 863  }
864 864  
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 -
894 894  .resource-inline-cta {
895 895   display: flex;
896 896   align-items: center;
... ... @@ -1022,14 +1022,9 @@
1022 1022   gap: 14px;
1023 1023   }
1024 1024  
1025 - #mainContentArea .cta-panel {
1026 - padding: 30px 22px;
1027 - border-radius: 20px;
905 + .cta-panel {
906 + padding: 24px 20px;
1028 1028   }
1029 -
1030 - #mainContentArea .cta-panel .btn-primary {
1031 - width: 100%;
1032 - }
1033 1033  }
1034 1034  
1035 1035  /* ========== Resource / Article Pages ========== */
... ... @@ -1041,6 +1041,9 @@
1041 1041  .resource-header {
1042 1042   padding: @section-padding;
1043 1043   border-top: none;
919 + background:
920 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
921 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
1044 1044  
1045 1045   h1 {
1046 1046   margin: 0 auto 14px;
... ... @@ -1188,6 +1188,7 @@
1188 1188   border: 1px solid @line;
1189 1189   border-radius: @radius;
1190 1190   padding: 18px;
1069 + background: #fff;
1191 1191   box-shadow: @shadow-sm;
1192 1192  
1193 1193   h4 {
... ... @@ -1286,6 +1286,7 @@
1286 1286  
1287 1287  .product-card {
1288 1288   position: relative;
1168 + background: #fff;
1289 1289   border: 1px solid @line;
1290 1290   border-radius: @radius;
1291 1291   box-shadow: @shadow-sm;
... ... @@ -1435,6 +1435,7 @@
1435 1435  .product-info-card,
1436 1436  .product-feature,
1437 1437  .product-gallery-panel {
1318 + background: #fff;
1438 1438   border: 1px solid @line;
1439 1439   border-radius: @radius;
1440 1440   box-shadow: @shadow-sm;
... ... @@ -1677,6 +1677,7 @@
1677 1677  /* ========== Resources Index ========== */
1678 1678  
1679 1679  .resources-index-page {
1561 + background: #fff;
1680 1680  
1681 1681   .services-grid {
1682 1682   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1712,321 +1712,3 @@
1712 1712   color: @muted;
1713 1713   }
1714 1714  }
1715 -
1716 -/* ========== Global Theme Background ========== */
1717 -
1718 -html,
1719 -body {
1720 - min-height: 100%;
1721 -}
1722 -
1723 -body {
1724 - color: @text;
1725 - background:
1726 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%),
1727 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%),
1728 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1729 - background-attachment: fixed;
1730 -}
1731 -
1732 -/* Let the body background show through the XWiki wrappers.
1733 -#mainContentArea,
1734 -.resource-page,
1735 -.resources-index-page {
1736 - background: transparent !important;
1737 - background-image: none !important;
1738 -}
1739 -*/
1740 -/* Remove local decorative backgrounds that compete with the global gradient.
1741 -.hero,
1742 -.hero.hero-centered,
1743 -.trust-strip,
1744 -.industry-trust-section,
1745 -.split-section,
1746 -.resource-strip,
1747 -.homepage-resource-strip,
1748 -.resource-header,
1749 -.product-section-muted,
1750 -.resources-index-page {
1751 - background: transparent !important;
1752 - background-image: none !important;
1753 -}
1754 - */
1755 -/* Keep large panels readable, but remove their inner gradients.
1756 -.industry-trust-section .industry-trust-panel,
1757 -.cta-panel,
1758 -.resource-inline-cta,
1759 -.resource-note,
1760 -.resource-cta {
1761 - background: #fff !important;
1762 - background-image: none !important;
1763 -} */
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 -