Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14

From version 28.42
edited by Agnease
on 2026/07/03 14:22
Change comment: There is no comment for this version
To version 25.29
edited by Agnease
on 2026/06/30 11:35
Change comment: There is no comment for this version

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
... ... @@ -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,12 +162,18 @@
162 162   color: #fff;
163 163   }
164 164  }
165 -*/
165 +
166 166  .btn-secondary {
167 - color: @text;
167 + color: @brand;
168 168   background: #fff;
169 - border: 1px solid fade(@text, 35%);
169 + border: 1px solid fade(@brand, 35%);
170 170  
171 + &:hover,
172 + &:focus {
173 + color: @brand-strong;
174 + border-color: @brand;
175 + background: @brand-bg;
176 + }
171 171  }
172 172  
173 173  /* ========== Hero ========== */
... ... @@ -247,128 +247,36 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Contrast Band ========== */
256 +/* ========== 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;
258 +.trust-strip {
259 + padding: 18px 0;
260 + border-top: 1px solid @line;
259 259  
260 - /* Remove gradient from here */
261 - background: none;
262 -}
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 + }
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 -
281 -/* Grid overlay stays exactly as you had it */
282 -.contrast-band::after {
283 - content: "";
284 - position: absolute;
285 - inset: 0;
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 - z-index: 0;
293 -}
294 -
295 -.contrast-band .container {
296 - position: relative;
297 - z-index: 1;
298 -}
299 -
300 -/* Everything below stays unchanged */
301 -.contrast-panel {
302 - max-width: 1040px;
303 - margin: 0 auto;
304 - text-align: center;
305 -}
306 -
307 -.contrast-band h2 {
308 - max-width: 860px;
309 - margin: 0 auto 12px;
310 - color: #fff;
311 -}
312 -
313 -.contrast-band .section-intro {
314 - max-width: 840px;
315 - margin: 0 auto 26px;
316 - color: #D9E3EE;
317 -}
318 -
319 -.contrast-tags {
320 - max-width: 940px;
321 - margin: 0 auto;
322 - display: flex;
323 - flex-wrap: wrap;
324 - justify-content: center;
325 - gap: 10px;
326 -}
327 -
328 -.contrast-tags span {
329 - display: inline-flex;
330 - align-items: center;
331 - padding: 8px 13px;
332 - border: 1px solid fade(#fff, 18%);
333 - border-radius: 999px;
334 - background: fade(#fff, 8%);
335 - color: #F8FAFC;
336 - font-size: 13px;
337 - font-weight: 700;
338 - line-height: 1.2;
339 -}
340 -
341 -.contrast-tags span::before {
342 - content: "";
343 - width: 7px;
344 - height: 7px;
345 - margin-right: 8px;
346 - border-radius: 50%;
347 - background: @brand;
348 - box-shadow: 0 0 0 4px fade(@brand, 18%);
349 -}
350 -
351 -.contrast-support {
352 - max-width: 860px;
353 - margin: 30px auto 0;
354 - color: #D9E3EE;
355 - text-align: center;
356 - font-size: 15px;
357 - line-height: 1.7;
358 -}
359 -
360 -@media (max-width: 640px) {
361 - .contrast-band {
362 - padding: 40px 0;
275 + li {
276 + display: flex;
277 + align-items: center;
278 + gap: 7px;
363 363   }
364 364  
365 - .contrast-tags span {
366 - font-size: 12px;
367 - padding: 8px 11px;
281 + i {
282 + color: @brand;
368 368   }
369 369  }
370 370  
371 -
372 372  /* ========== Reusable Grids ========== */
373 373  
374 374  .card-grid,
... ... @@ -525,6 +525,80 @@
525 525   }
526 526  }
527 527  
442 +.industry-trust-section {
443 + background:
444 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
445 +
446 + .industry-trust-panel {
447 + max-width: 1040px;
448 + margin: 0 auto;
449 + padding: 30px 28px;
450 + border: 1px solid fade(@brand, 16%);
451 + border-radius: @radius;
452 + background:
453 + radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
454 + box-shadow: @shadow-sm;
455 + text-align: center;
456 + }
457 +
458 + h2 {
459 + margin-bottom: 12px;
460 + }
461 +
462 + .section-intro {
463 + margin-bottom: 20px;
464 + max-width: 820px;
465 + }
466 +
467 + .industry-tags {
468 + max-width: 880px;
469 + margin: 0 auto;
470 + display: flex;
471 + flex-wrap: wrap;
472 + justify-content: center;
473 + gap: 10px;
474 + }
475 +
476 + .industry-tags span {
477 + display: inline-flex;
478 + align-items: center;
479 + padding: 7px 12px;
480 + border: 1px solid fade(@brand, 20%);
481 + border-radius: 999px;
482 + background: #fff;
483 + color: @text;
484 + font-size: 13px;
485 + font-weight: 600;
486 + line-height: 1.2;
487 + box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
488 + }
489 +
490 + .industry-support {
491 + max-width: 820px;
492 + margin: 22px auto 0;
493 + color: @muted;
494 + font-size: 16px;
495 + line-height: 1.6;
496 + }
497 +}
498 +
499 +@media (max-width: 640px) {
500 + .industry-trust-section {
501 + .industry-trust-panel {
502 + padding: 24px 18px;
503 + }
504 +
505 + .industry-tags {
506 + gap: 8px;
507 + }
508 +
509 + .industry-tags span {
510 + font-size: 12px;
511 + padding: 6px 10px;
512 + }
513 + }
514 +}
515 +
528 528  /* ========== Services ========== */
529 529  
530 530  .services {
... ... @@ -537,6 +537,7 @@
537 537   align-items: flex-start;
538 538   gap: 16px;
539 539   padding: 22px;
528 + background: #fff;
540 540   border: 1px solid @line;
541 541   border-radius: @radius;
542 542   box-shadow: @shadow-sm;
... ... @@ -624,6 +624,7 @@
624 624   position: relative;
625 625   padding: 16px 16px 16px 58px;
626 626   margin-bottom: 12px;
616 + background: #fff;
627 627   border: 1px solid @line;
628 628   border-radius: @radius;
629 629   box-shadow: @shadow-sm;
... ... @@ -755,8 +755,8 @@
755 755  
756 756  /* ========== CTA ========== */
757 757  
758 -#mainContentArea .cta-section {
759 - padding: 44px 0 56px;
748 +.cta-section {
749 + padding: @section-padding;
760 760  
761 761   .contact-inline {
762 762   margin: 0;
... ... @@ -768,70 +768,25 @@
768 768   }
769 769  }
770 770  
771 -#mainContentArea .cta-panel {
772 - position: relative;
773 - overflow: hidden;
774 - max-width: 1040px;
761 +.cta-panel {
762 + max-width: 860px;
775 775   margin: 0 auto;
776 - padding: 48px 40px;
777 - border: 0;
778 - border-radius: 26px;
779 - background:
780 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
781 - linear-gradient(135deg, @text 0%, @text-soft 100%);
782 - color: #fff;
783 - box-shadow: @shadow;
764 + padding: 32px;
765 + border-radius: @radius;
766 + border: 1px solid fade(@brand, 20%);
767 + box-shadow: @shadow-sm;
784 784   text-align: center;
785 -}
786 786  
787 -#mainContentArea .cta-panel::before {
788 - content: "";
789 - position: absolute;
790 - inset: 0;
791 - background:
792 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
793 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
794 - background-size: 48px 48px;
795 - opacity: .4;
796 - pointer-events: none;
797 -}
770 + h2 {
771 + margin-top: 0;
772 + }
798 798  
799 -#mainContentArea .cta-panel h2,
800 -#mainContentArea .cta-panel p,
801 -#mainContentArea .cta-panel .btn {
802 - position: relative;
803 - z-index: 1;
774 + p {
775 + color: @muted;
776 + line-height: 1.55;
777 + }
804 804  }
805 805  
806 -#mainContentArea .cta-panel h2 {
807 - max-width: 760px;
808 - margin: 0 auto 16px;
809 - color: #fff;
810 -}
811 -
812 -#mainContentArea .cta-panel p {
813 - max-width: 760px;
814 - margin: 0 auto 28px;
815 - color: #DBE4EF;
816 - font-size: 16px;
817 - line-height: 1.6;
818 -}
819 -
820 -#mainContentArea .cta-panel .btn-primary {
821 - border-color: #fff;
822 - background: #fff;
823 - color: @text;
824 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
825 -}
826 -
827 -#mainContentArea .cta-panel .btn-primary:hover,
828 -#mainContentArea .cta-panel .btn-primary:focus {
829 - border-color: #fff;
830 - background: #fff;
831 - color: @brand-strong;
832 - text-decoration: none;
833 -}
834 -
835 835  .resource-inline-cta {
836 836   display: flex;
837 837   align-items: center;
... ... @@ -963,14 +963,9 @@
963 963   gap: 14px;
964 964   }
965 965  
966 - #mainContentArea .cta-panel {
967 - padding: 30px 22px;
968 - border-radius: 20px;
911 + .cta-panel {
912 + padding: 24px 20px;
969 969   }
970 -
971 - #mainContentArea .cta-panel .btn-primary {
972 - width: 100%;
973 - }
974 974  }
975 975  
976 976  /* ========== Resource / Article Pages ========== */
... ... @@ -982,6 +982,9 @@
982 982  .resource-header {
983 983   padding: @section-padding;
984 984   border-top: none;
925 + background:
926 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
927 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
985 985  
986 986   h1 {
987 987   margin: 0 auto 14px;
... ... @@ -1129,6 +1129,7 @@
1129 1129   border: 1px solid @line;
1130 1130   border-radius: @radius;
1131 1131   padding: 18px;
1075 + background: #fff;
1132 1132   box-shadow: @shadow-sm;
1133 1133  
1134 1134   h4 {
... ... @@ -1227,6 +1227,7 @@
1227 1227  
1228 1228  .product-card {
1229 1229   position: relative;
1174 + background: #fff;
1230 1230   border: 1px solid @line;
1231 1231   border-radius: @radius;
1232 1232   box-shadow: @shadow-sm;
... ... @@ -1376,6 +1376,7 @@
1376 1376  .product-info-card,
1377 1377  .product-feature,
1378 1378  .product-gallery-panel {
1324 + background: #fff;
1379 1379   border: 1px solid @line;
1380 1380   border-radius: @radius;
1381 1381   box-shadow: @shadow-sm;
... ... @@ -1670,262 +1670,35 @@
1670 1670   background-attachment: fixed;
1671 1671  }
1672 1672  
1673 -/* ========== Main Page Hero / SaaS Layout ========== */
1674 -
1675 -#mainContentArea .hero.hero-saas {
1676 - min-height: auto;
1677 - padding: 60px 0 34px;
1678 - display: flex;
1679 - align-items: center;
1680 - overflow: hidden;
1681 - background: transparent;
1619 +/* Let the body background show through the XWiki wrappers.
1620 +#mainContentArea,
1621 +.resource-page,
1622 +.resources-index-page {
1623 + background: transparent !important;
1624 + background-image: none !important;
1682 1682  }
1683 -
1684 -#mainContentArea .hero-layout {
1685 - max-width: 1120px;
1686 - margin: 0 auto;
1687 - display: grid;
1688 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1689 - gap: 56px;
1690 - align-items: center;
1626 +*/
1627 +/* Remove local decorative backgrounds that compete with the global gradient.
1628 +.hero,
1629 +.hero.hero-centered,
1630 +.trust-strip,
1631 +.industry-trust-section,
1632 +.split-section,
1633 +.resource-strip,
1634 +.homepage-resource-strip,
1635 +.resource-header,
1636 +.product-section-muted,
1637 +.resources-index-page {
1638 + background: transparent !important;
1639 + background-image: none !important;
1691 1691  }
1692 -
1693 -#mainContentArea .hero-copy {
1694 - min-width: 0;
1695 - text-align: left;
1696 -}
1697 -
1698 -#mainContentArea .hero.hero-saas h1 {
1699 - max-width: 640px;
1700 - margin: 0 0 26px;
1701 - font-size: 60px;
1702 - font-weight: 800;
1703 - line-height: 1;
1704 - letter-spacing: -3px;
1705 -}
1706 -
1707 -#mainContentArea .hero.hero-saas h1 span {
1708 - color: @brand;
1709 -}
1710 -
1711 -#mainContentArea .hero.hero-saas .lead {
1712 - max-width: 590px;
1713 - margin: 0 0 28px;
1714 - color: #334155;
1715 - text-align: left;
1716 - font-size: 18px;
1717 - line-height: 1.6;
1718 -}
1719 -
1720 -#mainContentArea .hero.hero-saas .benefits {
1721 - max-width: 620px;
1722 - margin: 0 0 30px;
1723 - padding: 0;
1724 - display: grid;
1725 - grid-template-columns: repeat(2, minmax(0, 1fr));
1726 - gap: 10px 24px;
1727 - list-style: none;
1728 - color: #475569;
1729 - font-size: 15px;
1730 - text-align: left;
1731 -}
1732 -
1733 -#mainContentArea .hero.hero-saas .benefits li {
1734 - display: grid;
1735 - grid-template-columns: 18px minmax(0, 1fr);
1736 - column-gap: 8px;
1737 - align-items: start;
1738 - margin: 0;
1739 - line-height: 1.45;
1740 -}
1741 -
1742 -#mainContentArea .hero.hero-saas .benefits li::before {
1743 - content: "✓";
1744 - display: block;
1745 - width: 18px;
1746 - color: @brand;
1747 - font-weight: 900;
1748 - line-height: 1.45;
1749 - text-align: left;
1750 - margin: 0;
1751 -}
1752 -
1753 -#mainContentArea .hero.hero-saas .hero-actions,
1754 -#mainContentArea .hero.hero-saas #hero-cta {
1755 - display: flex;
1756 - flex-wrap: wrap;
1757 - justify-content: flex-start;
1758 - gap: 12px;
1759 - margin-top: 0;
1760 -}
1761 -
1762 -#mainContentArea .hero-image-wrapper {
1763 - min-width: 0;
1764 - display: flex;
1765 - justify-content: center;
1766 - align-items: center;
1767 -}
1768 -
1769 -#mainContentArea .hero-image {
1770 - display: block;
1771 - width: 100%;
1772 - max-width: 620px;
1773 - height: auto;
1774 - border: 0;
1775 -}
1776 -
1777 -/* ========== Main Page Hero Responsive ========== */
1778 -
1779 -@media (max-width: 1100px) {
1780 - #mainContentArea .hero-layout {
1781 - max-width: 760px;
1782 - grid-template-columns: 1fr;
1783 - gap: 34px;
1784 - }
1785 -
1786 - #mainContentArea .hero-copy {
1787 - order: 1;
1788 - text-align: center;
1789 - }
1790 -
1791 - #mainContentArea .hero-image-wrapper {
1792 - order: 2;
1793 - }
1794 -
1795 - #mainContentArea .hero.hero-saas h1 {
1796 - margin-left: auto;
1797 - margin-right: auto;
1798 - text-align: center;
1799 - }
1800 -
1801 - #mainContentArea .hero.hero-saas .lead {
1802 - margin-left: auto;
1803 - margin-right: auto;
1804 - text-align: center;
1805 - }
1806 -
1807 - #mainContentArea .hero.hero-saas .benefits {
1808 - margin-left: auto;
1809 - margin-right: auto;
1810 - }
1811 -
1812 - #mainContentArea .hero.hero-saas .hero-actions,
1813 - #mainContentArea .hero.hero-saas #hero-cta {
1814 - justify-content: center;
1815 - }
1816 -
1817 - #mainContentArea .hero-image {
1818 - max-width: 620px;
1819 - }
1820 -}
1821 -
1822 -@media (max-width: 640px) {
1823 - #mainContentArea .hero.hero-saas {
1824 - padding: 42px 0 28px;
1825 - }
1826 -
1827 - #mainContentArea .hero-layout {
1828 - gap: 28px;
1829 - }
1830 -
1831 - #mainContentArea .hero.hero-saas h1 {
1832 - font-size: 42px;
1833 - letter-spacing: -1.5px;
1834 - }
1835 -
1836 - #mainContentArea .hero.hero-saas .lead {
1837 - font-size: 17px;
1838 - }
1839 -
1840 - #mainContentArea .hero.hero-saas .benefits {
1841 - grid-template-columns: 1fr;
1842 - }
1843 -
1844 - #mainContentArea .hero-image {
1845 - max-width: 100%;
1846 - }
1847 -}
1848 -
1849 -/* ========== Accessibility / Contrast Improvements ========== */
1850 -
1851 -/* Keep the article area readable while preserving the page background around it. */
1852 -/*#mainContentArea .resource-layout {
1853 - padding: 28px;
1854 - border: 1px solid fade(@line, 85%);
1855 - border-radius: @radius;
1856 - background: rgba(255, 255, 255, .88);
1857 - box-shadow: @shadow-sm;
1858 -}*/
1859 -
1860 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1861 -#mainContentArea .widget,
1862 -#mainContentArea .pathway-card,
1863 -#mainContentArea .service-card,
1864 -#mainContentArea .resource-card,
1865 -#mainContentArea .services .service,
1866 -#mainContentArea .product-card,
1867 -#mainContentArea .product-feature,
1868 -#mainContentArea .product-summary-card,
1869 -#mainContentArea .product-info-card {
1870 - background: #fff;
1871 -}
1872 -
1873 -/* Make notes more readable and visually stronger. */
1874 -#mainContentArea .resource-note {
1875 - border: 1px solid fade(@brand, 18%);
1876 - border-left: 4px solid @brand;
1877 - background: #fff;
1878 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1879 -}
1880 -
1881 -/* Keep the sidebar clearly separated from the background. */
1882 -#mainContentArea .resource-sidebar {
1883 - background: #fff;
1884 -}
1885 -
1886 -/* Make CTA panels stand out more clearly. */
1887 -#mainContentArea .resource-cta,
1888 -#mainContentArea .resource-inline-cta {
1889 - background: #fff;
1890 -}
1891 -
1892 -/* Improve table readability on long resource pages. */
1893 -#mainContentArea .resource-content table {
1894 - background: #fff;
1895 -}
1896 -
1897 -#mainContentArea .resource-content table th {
1898 - color: @text;
1899 - background: #F8FAFC;
1900 -}
1901 -
1902 -#mainContentArea .resource-content table td {
1903 - color: @text-soft;
1904 -}
1905 -
1906 -/* Slightly improve paragraph/list contrast in long articles. */
1907 -#mainContentArea .resource-content p,
1908 -#mainContentArea .resource-content li {
1909 - color: @text-soft;
1910 -}
1911 -
1912 -#mainContentArea .resource-content .resource-note p,
1913 -#mainContentArea .resource-content .resource-checklist li,
1914 -#mainContentArea .resource-content .process-list li {
1915 - color: @muted;
1916 -}
1917 -
1918 -@media (max-width: 900px) {
1919 - #mainContentArea .resource-layout {
1920 - padding: 22px;
1921 - }
1922 -}
1923 -
1924 -@media (max-width: 640px) {
1925 - #mainContentArea .resource-layout {
1926 - padding: 18px;
1927 - border-radius: 14px;
1928 - }
1929 -}
1930 -
1931 -
1641 + */
1642 +/* Keep large panels readable, but remove their inner gradients.
1643 +.industry-trust-section .industry-trust-panel,
1644 +.cta-panel,
1645 +.resource-inline-cta,
1646 +.resource-note,
1647 +.resource-cta {
1648 + background: #fff !important;
1649 + background-image: none !important;
1650 +} */