Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 25.27
edited by Agnease
on 2026/06/30 11:34
Change comment: There is no comment for this version
To version 28.25
edited by Agnease
on 2026/07/03 13:16
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 ========== */
... ... @@ -253,33 +253,122 @@
253 253   margin-top: 22px;
254 254  }
255 255  
256 -/* ========== Trust Strip ========== */
250 +/* ========== Contrast Band ========== */
257 257  
258 -.trust-strip {
259 - padding: 18px 0;
260 - border-top: 1px solid @line;
252 +.contrast-band {
253 + position: relative;
254 + overflow: visible;
255 + isolation: isolate;
256 + padding: 54px 0;
257 + border-top: 0;
258 + color: #fff;
259 + background: transparent;
260 +}
261 261  
262 - ul {
263 - max-width: 960px;
264 - margin: 0 auto;
265 - padding: 0;
266 - list-style: none;
267 - display: flex;
268 - justify-content: center;
269 - gap: 22px;
270 - flex-wrap: wrap;
271 - color: @muted;
272 - font-size: 13px;
273 - }
262 +.contrast-band::before {
263 + content: "";
264 + position: absolute;
265 + top: 0;
266 + bottom: 0;
267 + left: 50%;
268 + width: 100vw;
269 + transform: translateX(-50%);
270 + z-index: -2;
271 + background:
272 + radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
273 + radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
274 + linear-gradient(135deg, @text 0%, @text-soft 100%);
275 +}
274 274  
275 - li {
276 - display: flex;
277 - align-items: center;
278 - gap: 7px;
277 +.contrast-band::after {
278 + content: "";
279 + position: absolute;
280 + top: 0;
281 + bottom: 0;
282 + left: 50%;
283 + width: 100vw;
284 + transform: translateX(-50%);
285 + z-index: -1;
286 + background:
287 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
288 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
289 + background-size: 52px 52px;
290 + opacity: .38;
291 + pointer-events: none;
292 +}
293 +
294 +.contrast-band .container {
295 + position: relative;
296 + z-index: 1;
297 +}
298 +
299 +.contrast-panel {
300 + max-width: 1040px;
301 + margin: 0 auto;
302 + text-align: center;
303 +}
304 +
305 +.contrast-band h2 {
306 + max-width: 860px;
307 + margin: 0 auto 12px;
308 + color: #fff;
309 +}
310 +
311 +.contrast-band .section-intro {
312 + max-width: 840px;
313 + margin: 0 auto 26px;
314 + color: #D9E3EE;
315 +}
316 +
317 +.contrast-tags {
318 + max-width: 940px;
319 + margin: 0 auto;
320 + display: flex;
321 + flex-wrap: wrap;
322 + justify-content: center;
323 + gap: 10px;
324 +}
325 +
326 +.contrast-tags span {
327 + display: inline-flex;
328 + align-items: center;
329 + padding: 8px 13px;
330 + border: 1px solid fade(#fff, 18%);
331 + border-radius: 999px;
332 + background: fade(#fff, 8%);
333 + color: #F8FAFC;
334 + font-size: 13px;
335 + font-weight: 700;
336 + line-height: 1.2;
337 +}
338 +
339 +.contrast-tags span::before {
340 + content: "";
341 + width: 7px;
342 + height: 7px;
343 + margin-right: 8px;
344 + border-radius: 50%;
345 + background: @brand;
346 + box-shadow: 0 0 0 4px fade(@brand, 18%);
347 +}
348 +
349 +.contrast-support {
350 + max-width: 860px;
351 + margin: 30px auto 0;
352 + color: #D9E3EE;
353 + text-align: center;
354 + font-size: 15px;
355 + line-height: 1.7;
356 +}
357 +
358 +@media (max-width: 640px) {
359 + .contrast-band {
360 + padding: 40px 0;
279 279   }
280 280  
281 - i {
282 - color: @brand;
363 + .contrast-tags span {
364 + font-size: 12px;
365 + padding: 8px 11px;
283 283   }
284 284  }
285 285  
... ... @@ -330,7 +330,6 @@
330 330  .pathway-card,
331 331  .service-card,
332 332  .resource-card {
333 - background: #fff;
334 334   border: 1px solid @line;
335 335   border-radius: @radius;
336 336   box-shadow: @shadow-sm;
... ... @@ -440,80 +440,6 @@
440 440   }
441 441  }
442 442  
443 -.industry-trust-section {
444 - background:
445 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
446 -
447 - .industry-trust-panel {
448 - max-width: 1040px;
449 - margin: 0 auto;
450 - padding: 30px 28px;
451 - border: 1px solid fade(@brand, 16%);
452 - border-radius: @radius;
453 - background:
454 - radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
455 - box-shadow: @shadow-sm;
456 - text-align: center;
457 - }
458 -
459 - h2 {
460 - margin-bottom: 12px;
461 - }
462 -
463 - .section-intro {
464 - margin-bottom: 20px;
465 - max-width: 820px;
466 - }
467 -
468 - .industry-tags {
469 - max-width: 880px;
470 - margin: 0 auto;
471 - display: flex;
472 - flex-wrap: wrap;
473 - justify-content: center;
474 - gap: 10px;
475 - }
476 -
477 - .industry-tags span {
478 - display: inline-flex;
479 - align-items: center;
480 - padding: 7px 12px;
481 - border: 1px solid fade(@brand, 20%);
482 - border-radius: 999px;
483 - background: #fff;
484 - color: @text;
485 - font-size: 13px;
486 - font-weight: 600;
487 - line-height: 1.2;
488 - box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
489 - }
490 -
491 - .industry-support {
492 - max-width: 820px;
493 - margin: 22px auto 0;
494 - color: @muted;
495 - font-size: 16px;
496 - line-height: 1.6;
497 - }
498 -}
499 -
500 -@media (max-width: 640px) {
501 - .industry-trust-section {
502 - .industry-trust-panel {
503 - padding: 24px 18px;
504 - }
505 -
506 - .industry-tags {
507 - gap: 8px;
508 - }
509 -
510 - .industry-tags span {
511 - font-size: 12px;
512 - padding: 6px 10px;
513 - }
514 - }
515 -}
516 -
517 517  /* ========== Services ========== */
518 518  
519 519  .services {
... ... @@ -526,7 +526,6 @@
526 526   align-items: flex-start;
527 527   gap: 16px;
528 528   padding: 22px;
529 - background: #fff;
530 530   border: 1px solid @line;
531 531   border-radius: @radius;
532 532   box-shadow: @shadow-sm;
... ... @@ -614,7 +614,6 @@
614 614   position: relative;
615 615   padding: 16px 16px 16px 58px;
616 616   margin-bottom: 12px;
617 - background: #fff;
618 618   border: 1px solid @line;
619 619   border-radius: @radius;
620 620   box-shadow: @shadow-sm;
... ... @@ -746,8 +746,8 @@
746 746  
747 747  /* ========== CTA ========== */
748 748  
749 -.cta-section {
750 - padding: @section-padding;
755 +#mainContentArea .cta-section {
756 + padding: 44px 0 56px;
751 751  
752 752   .contact-inline {
753 753   margin: 0;
... ... @@ -759,27 +759,70 @@
759 759   }
760 760  }
761 761  
762 -.cta-panel {
763 - max-width: 860px;
768 +#mainContentArea .cta-panel {
769 + position: relative;
770 + overflow: hidden;
771 + max-width: 1040px;
764 764   margin: 0 auto;
765 - padding: 32px;
766 - border-radius: @radius;
767 - border: 1px solid fade(@brand, 20%);
773 + padding: 48px 40px;
774 + border: 0;
775 + border-radius: 26px;
768 768   background:
769 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
770 - box-shadow: @shadow-sm;
777 + radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
778 + linear-gradient(135deg, @text 0%, @text-soft 100%);
779 + color: #fff;
780 + box-shadow: @shadow;
771 771   text-align: center;
782 +}
772 772  
773 - h2 {
774 - margin-top: 0;
775 - }
784 +#mainContentArea .cta-panel::before {
785 + content: "";
786 + position: absolute;
787 + inset: 0;
788 + background:
789 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
790 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
791 + background-size: 48px 48px;
792 + opacity: .4;
793 + pointer-events: none;
794 +}
776 776  
777 - p {
778 - color: @muted;
779 - line-height: 1.55;
780 - }
796 +#mainContentArea .cta-panel h2,
797 +#mainContentArea .cta-panel p,
798 +#mainContentArea .cta-panel .btn {
799 + position: relative;
800 + z-index: 1;
781 781  }
782 782  
803 +#mainContentArea .cta-panel h2 {
804 + max-width: 760px;
805 + margin: 0 auto 16px;
806 + color: #fff;
807 +}
808 +
809 +#mainContentArea .cta-panel p {
810 + max-width: 760px;
811 + margin: 0 auto 28px;
812 + color: #DBE4EF;
813 + font-size: 16px;
814 + line-height: 1.6;
815 +}
816 +
817 +#mainContentArea .cta-panel .btn-primary {
818 + border-color: #fff;
819 + background: #fff;
820 + color: @text;
821 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
822 +}
823 +
824 +#mainContentArea .cta-panel .btn-primary:hover,
825 +#mainContentArea .cta-panel .btn-primary:focus {
826 + border-color: #fff;
827 + background: #fff;
828 + color: @brand-strong;
829 + text-decoration: none;
830 +}
831 +
783 783  .resource-inline-cta {
784 784   display: flex;
785 785   align-items: center;
... ... @@ -911,9 +911,14 @@
911 911   gap: 14px;
912 912   }
913 913  
914 - .cta-panel {
915 - padding: 24px 20px;
963 + #mainContentArea .cta-panel {
964 + padding: 30px 22px;
965 + border-radius: 20px;
916 916   }
967 +
968 + #mainContentArea .cta-panel .btn-primary {
969 + width: 100%;
970 + }
917 917  }
918 918  
919 919  /* ========== Resource / Article Pages ========== */
... ... @@ -925,9 +925,6 @@
925 925  .resource-header {
926 926   padding: @section-padding;
927 927   border-top: none;
928 - background:
929 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
930 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
931 931  
932 932   h1 {
933 933   margin: 0 auto 14px;
... ... @@ -1075,7 +1075,6 @@
1075 1075   border: 1px solid @line;
1076 1076   border-radius: @radius;
1077 1077   padding: 18px;
1078 - background: #fff;
1079 1079   box-shadow: @shadow-sm;
1080 1080  
1081 1081   h4 {
... ... @@ -1174,7 +1174,6 @@
1174 1174  
1175 1175  .product-card {
1176 1176   position: relative;
1177 - background: #fff;
1178 1178   border: 1px solid @line;
1179 1179   border-radius: @radius;
1180 1180   box-shadow: @shadow-sm;
... ... @@ -1324,7 +1324,6 @@
1324 1324  .product-info-card,
1325 1325  .product-feature,
1326 1326  .product-gallery-panel {
1327 - background: #fff;
1328 1328   border: 1px solid @line;
1329 1329   border-radius: @radius;
1330 1330   box-shadow: @shadow-sm;
... ... @@ -1619,35 +1619,271 @@
1619 1619   background-attachment: fixed;
1620 1620  }
1621 1621  
1622 -/* Let the body background show through the XWiki wrappers.
1623 -#mainContentArea,
1624 -.resource-page,
1625 -.resources-index-page {
1626 - background: transparent !important;
1627 - background-image: none !important;
1670 +/* ========== Main Page Hero / SaaS Layout ========== */
1671 +
1672 +#mainContentArea .hero.hero-saas {
1673 + min-height: auto;
1674 + padding: 60px 0 34px;
1675 + display: flex;
1676 + align-items: center;
1677 + overflow: hidden;
1678 + background: transparent;
1628 1628  }
1629 -*/
1630 -/* Remove local decorative backgrounds that compete with the global gradient.
1631 -.hero,
1632 -.hero.hero-centered,
1633 -.trust-strip,
1634 -.industry-trust-section,
1635 -.split-section,
1636 -.resource-strip,
1637 -.homepage-resource-strip,
1638 -.resource-header,
1639 -.product-section-muted,
1640 -.resources-index-page {
1641 - background: transparent !important;
1642 - background-image: none !important;
1680 +
1681 +#mainContentArea .hero-layout {
1682 + max-width: 1120px;
1683 + margin: 0 auto;
1684 + display: grid;
1685 + grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1686 + gap: 56px;
1687 + align-items: center;
1643 1643  }
1644 - */
1645 -/* Keep large panels readable, but remove their inner gradients.
1646 -.industry-trust-section .industry-trust-panel,
1647 -.cta-panel,
1648 -.resource-inline-cta,
1649 -.resource-note,
1650 -.resource-cta {
1651 - background: #fff !important;
1652 - background-image: none !important;
1653 -} */
1689 +
1690 +#mainContentArea .hero-copy {
1691 + min-width: 0;
1692 + text-align: left;
1693 +}
1694 +
1695 +#mainContentArea .hero.hero-saas h1 {
1696 + max-width: 640px;
1697 + margin: 0 0 26px;
1698 + font-size: 60px;
1699 + font-weight: 800;
1700 + line-height: 1;
1701 + letter-spacing: -3px;
1702 +}
1703 +
1704 +#mainContentArea .hero.hero-saas h1 span {
1705 + color: @brand;
1706 +}
1707 +
1708 +#mainContentArea .hero.hero-saas .lead {
1709 + max-width: 590px;
1710 + margin: 0 0 28px;
1711 + color: #334155;
1712 + text-align: left;
1713 + font-size: 18px;
1714 + line-height: 1.6;
1715 +}
1716 +
1717 +#mainContentArea .hero.hero-saas .benefits {
1718 + max-width: 620px;
1719 + margin: 0 0 30px;
1720 + padding: 0;
1721 + display: grid;
1722 + grid-template-columns: repeat(2, minmax(0, 1fr));
1723 + gap: 10px 24px;
1724 + list-style: none;
1725 + color: #475569;
1726 + font-size: 15px;
1727 + text-align: left;
1728 +}
1729 +
1730 +#mainContentArea .hero.hero-saas .benefits li {
1731 + display: grid;
1732 + grid-template-columns: 18px minmax(0, 1fr);
1733 + column-gap: 8px;
1734 + align-items: start;
1735 + margin: 0;
1736 + line-height: 1.45;
1737 +}
1738 +
1739 +#mainContentArea .hero.hero-saas .benefits li::before {
1740 + content: "✓";
1741 + display: block;
1742 + width: 18px;
1743 + color: @brand;
1744 + font-weight: 900;
1745 + line-height: 1.45;
1746 + text-align: left;
1747 + margin: 0;
1748 +}
1749 +
1750 +#mainContentArea .hero.hero-saas .hero-actions,
1751 +#mainContentArea .hero.hero-saas #hero-cta {
1752 + display: flex;
1753 + flex-wrap: wrap;
1754 + justify-content: flex-start;
1755 + gap: 12px;
1756 + margin-top: 0;
1757 +}
1758 +
1759 +#mainContentArea .hero-image-wrapper {
1760 + min-width: 0;
1761 + display: flex;
1762 + justify-content: center;
1763 + align-items: center;
1764 +}
1765 +
1766 +#mainContentArea .hero-image {
1767 + display: block;
1768 + width: 100%;
1769 + max-width: 620px;
1770 + height: auto;
1771 + border: 0;
1772 +}
1773 +
1774 +/* ========== Main Page Hero Responsive ========== */
1775 +
1776 +@media (max-width: 1100px) {
1777 + #mainContentArea .hero-layout {
1778 + max-width: 760px;
1779 + grid-template-columns: 1fr;
1780 + gap: 34px;
1781 + }
1782 +
1783 + #mainContentArea .hero-copy {
1784 + order: 1;
1785 + text-align: center;
1786 + }
1787 +
1788 + #mainContentArea .hero-image-wrapper {
1789 + order: 2;
1790 + }
1791 +
1792 + #mainContentArea .hero.hero-saas h1 {
1793 + margin-left: auto;
1794 + margin-right: auto;
1795 + text-align: center;
1796 + }
1797 +
1798 + #mainContentArea .hero.hero-saas .lead {
1799 + margin-left: auto;
1800 + margin-right: auto;
1801 + text-align: center;
1802 + }
1803 +
1804 + #mainContentArea .hero.hero-saas .benefits {
1805 + margin-left: auto;
1806 + margin-right: auto;
1807 + }
1808 +
1809 + #mainContentArea .hero.hero-saas .hero-actions,
1810 + #mainContentArea .hero.hero-saas #hero-cta {
1811 + justify-content: center;
1812 + }
1813 +
1814 + #mainContentArea .hero-image {
1815 + max-width: 620px;
1816 + }
1817 +}
1818 +
1819 +@media (max-width: 640px) {
1820 + #mainContentArea .hero.hero-saas {
1821 + padding: 42px 0 28px;
1822 + }
1823 +
1824 + #mainContentArea .hero-layout {
1825 + gap: 28px;
1826 + }
1827 +
1828 + #mainContentArea .hero.hero-saas h1 {
1829 + font-size: 42px;
1830 + letter-spacing: -1.5px;
1831 + }
1832 +
1833 + #mainContentArea .hero.hero-saas .lead {
1834 + font-size: 17px;
1835 + }
1836 +
1837 + #mainContentArea .hero.hero-saas .benefits {
1838 + grid-template-columns: 1fr;
1839 + }
1840 +
1841 + #mainContentArea .hero-image {
1842 + max-width: 100%;
1843 + }
1844 +}
1845 +
1846 +/* ========== Accessibility / Contrast Improvements ========== */
1847 +
1848 +/* Make the global background softer and less distracting. */
1849 +body {
1850 + background:
1851 + radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1852 + radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1853 + linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1854 + background-attachment: scroll;
1855 +}
1856 +
1857 +/* Keep the article area readable while preserving the page background around it. */
1858 +#mainContentArea .resource-layout {
1859 + padding: 28px;
1860 + border: 1px solid fade(@line, 85%);
1861 + border-radius: @radius;
1862 + background: rgba(255, 255, 255, .88);
1863 + box-shadow: @shadow-sm;
1864 +}
1865 +
1866 +/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1867 +#mainContentArea .widget,
1868 +#mainContentArea .pathway-card,
1869 +#mainContentArea .service-card,
1870 +#mainContentArea .resource-card,
1871 +#mainContentArea .services .service,
1872 +#mainContentArea .product-card,
1873 +#mainContentArea .product-feature,
1874 +#mainContentArea .product-summary-card,
1875 +#mainContentArea .product-info-card {
1876 + background: #fff;
1877 +}
1878 +
1879 +/* Make notes more readable and visually stronger. */
1880 +#mainContentArea .resource-note {
1881 + border: 1px solid fade(@brand, 18%);
1882 + border-left: 4px solid @brand;
1883 + background: #fff;
1884 + box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1885 +}
1886 +
1887 +/* Keep the sidebar clearly separated from the background. */
1888 +#mainContentArea .resource-sidebar {
1889 + background: #fff;
1890 +}
1891 +
1892 +/* Make CTA panels stand out more clearly. */
1893 +#mainContentArea .resource-cta,
1894 +#mainContentArea .resource-inline-cta {
1895 + background: #fff;
1896 +}
1897 +
1898 +/* Improve table readability on long resource pages. */
1899 +#mainContentArea .resource-content table {
1900 + background: #fff;
1901 +}
1902 +
1903 +#mainContentArea .resource-content table th {
1904 + color: @text;
1905 + background: #F8FAFC;
1906 +}
1907 +
1908 +#mainContentArea .resource-content table td {
1909 + color: @text-soft;
1910 +}
1911 +
1912 +/* Slightly improve paragraph/list contrast in long articles. */
1913 +#mainContentArea .resource-content p,
1914 +#mainContentArea .resource-content li {
1915 + color: @text-soft;
1916 +}
1917 +
1918 +#mainContentArea .resource-content .resource-note p,
1919 +#mainContentArea .resource-content .resource-checklist li,
1920 +#mainContentArea .resource-content .process-list li {
1921 + color: @muted;
1922 +}
1923 +
1924 +@media (max-width: 900px) {
1925 + #mainContentArea .resource-layout {
1926 + padding: 22px;
1927 + }
1928 +}
1929 +
1930 +@media (max-width: 640px) {
1931 + #mainContentArea .resource-layout {
1932 + padding: 18px;
1933 + border-radius: 14px;
1934 + }
1935 +}
1936 +
1937 +