Changes for page Public Web Site
Last modified by Agnease on 2026/07/03 16:14
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Attachments (0 modified, 0 added, 1 removed)
-
Objects (1 modified, 0 added, 0 removed)
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,122 +247,33 @@ 247 247 margin-top: 22px; 248 248 } 249 249 250 -/* ========== ContrastBand========== */256 +/* ========== Trust Strip ========== */ 251 251 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 -} 258 +.trust-strip { 259 + padding: 18px 0; 260 + border-top: 1px solid @line; 261 261 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 -} 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 + } 276 276 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; 275 + li { 276 + display: flex; 277 + align-items: center; 278 + gap: 7px; 361 361 } 362 362 363 - .contrast-tags span { 364 - font-size: 12px; 365 - padding: 8px 11px; 281 + i { 282 + color: @brand; 366 366 } 367 367 } 368 368 ... ... @@ -413,6 +413,7 @@ 413 413 .pathway-card, 414 414 .service-card, 415 415 .resource-card { 333 + background: #fff; 416 416 border: 1px solid @line; 417 417 border-radius: @radius; 418 418 box-shadow: @shadow-sm; ... ... @@ -522,6 +522,80 @@ 522 522 } 523 523 } 524 524 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 + 525 525 /* ========== Services ========== */ 526 526 527 527 .services { ... ... @@ -534,6 +534,7 @@ 534 534 align-items: flex-start; 535 535 gap: 16px; 536 536 padding: 22px; 529 + background: #fff; 537 537 border: 1px solid @line; 538 538 border-radius: @radius; 539 539 box-shadow: @shadow-sm; ... ... @@ -621,6 +621,7 @@ 621 621 position: relative; 622 622 padding: 16px 16px 16px 58px; 623 623 margin-bottom: 12px; 617 + background: #fff; 624 624 border: 1px solid @line; 625 625 border-radius: @radius; 626 626 box-shadow: @shadow-sm; ... ... @@ -752,8 +752,8 @@ 752 752 753 753 /* ========== CTA ========== */ 754 754 755 - #mainContentArea.cta-section {756 - padding: 44px 0 56px;749 +.cta-section { 750 + padding: @section-padding; 757 757 758 758 .contact-inline { 759 759 margin: 0; ... ... @@ -765,70 +765,25 @@ 765 765 } 766 766 } 767 767 768 -#mainContentArea .cta-panel { 769 - position: relative; 770 - overflow: hidden; 771 - max-width: 1040px; 762 +.cta-panel { 763 + max-width: 860px; 772 772 margin: 0 auto; 773 - padding: 48px 40px; 774 - border: 0; 775 - border-radius: 26px; 776 - background: 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; 765 + padding: 32px; 766 + border-radius: @radius; 767 + border: 1px solid fade(@brand, 20%); 768 + box-shadow: @shadow-sm; 781 781 text-align: center; 782 -} 783 783 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 -} 771 + h2 { 772 + margin-top: 0; 773 + } 795 795 796 -#mainContentArea .cta-panel h2, 797 -#mainContentArea .cta-panel p, 798 -#mainContentArea .cta-panel .btn { 799 - position: relative; 800 - z-index: 1; 775 + p { 776 + color: @muted; 777 + line-height: 1.55; 778 + } 801 801 } 802 802 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 - 832 832 .resource-inline-cta { 833 833 display: flex; 834 834 align-items: center; ... ... @@ -960,14 +960,9 @@ 960 960 gap: 14px; 961 961 } 962 962 963 - #mainContentArea .cta-panel { 964 - padding: 30px 22px; 965 - border-radius: 20px; 912 + .cta-panel { 913 + padding: 24px 20px; 966 966 } 967 - 968 - #mainContentArea .cta-panel .btn-primary { 969 - width: 100%; 970 - } 971 971 } 972 972 973 973 /* ========== Resource / Article Pages ========== */ ... ... @@ -979,6 +979,9 @@ 979 979 .resource-header { 980 980 padding: @section-padding; 981 981 border-top: none; 926 + background: 927 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 928 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 982 982 983 983 h1 { 984 984 margin: 0 auto 14px; ... ... @@ -1126,6 +1126,7 @@ 1126 1126 border: 1px solid @line; 1127 1127 border-radius: @radius; 1128 1128 padding: 18px; 1076 + background: #fff; 1129 1129 box-shadow: @shadow-sm; 1130 1130 1131 1131 h4 { ... ... @@ -1224,6 +1224,7 @@ 1224 1224 1225 1225 .product-card { 1226 1226 position: relative; 1175 + background: #fff; 1227 1227 border: 1px solid @line; 1228 1228 border-radius: @radius; 1229 1229 box-shadow: @shadow-sm; ... ... @@ -1373,6 +1373,7 @@ 1373 1373 .product-info-card, 1374 1374 .product-feature, 1375 1375 .product-gallery-panel { 1325 + background: #fff; 1376 1376 border: 1px solid @line; 1377 1377 border-radius: @radius; 1378 1378 box-shadow: @shadow-sm; ... ... @@ -1667,276 +1667,35 @@ 1667 1667 background-attachment: fixed; 1668 1668 } 1669 1669 1670 -#mainContentArea { 1671 - padding: 0; 1672 - overflow-x: hidden; 1620 +/* Let the body background show through the XWiki wrappers. 1621 +#mainContentArea, 1622 +.resource-page, 1623 +.resources-index-page { 1624 + background: transparent !important; 1625 + background-image: none !important; 1673 1673 } 1674 - 1675 -/* ========== Main Page Hero / SaaS Layout ========== */ 1676 - 1677 -#mainContentArea .hero.hero-saas { 1678 - min-height: auto; 1679 - padding: 60px 0 34px; 1680 - display: flex; 1681 - align-items: center; 1682 - overflow: hidden; 1683 - background: transparent; 1627 +*/ 1628 +/* Remove local decorative backgrounds that compete with the global gradient. 1629 +.hero, 1630 +.hero.hero-centered, 1631 +.trust-strip, 1632 +.industry-trust-section, 1633 +.split-section, 1634 +.resource-strip, 1635 +.homepage-resource-strip, 1636 +.resource-header, 1637 +.product-section-muted, 1638 +.resources-index-page { 1639 + background: transparent !important; 1640 + background-image: none !important; 1684 1684 } 1685 - 1686 -#mainContentArea .hero-layout { 1687 - max-width: 1120px; 1688 - margin: 0 auto; 1689 - display: grid; 1690 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); 1691 - gap: 56px; 1692 - align-items: center; 1693 -} 1694 - 1695 -#mainContentArea .hero-copy { 1696 - min-width: 0; 1697 - text-align: left; 1698 -} 1699 - 1700 -#mainContentArea .hero.hero-saas h1 { 1701 - max-width: 640px; 1702 - margin: 0 0 26px; 1703 - font-size: 60px; 1704 - font-weight: 800; 1705 - line-height: 1; 1706 - letter-spacing: -3px; 1707 -} 1708 - 1709 -#mainContentArea .hero.hero-saas h1 span { 1710 - color: @brand; 1711 -} 1712 - 1713 -#mainContentArea .hero.hero-saas .lead { 1714 - max-width: 590px; 1715 - margin: 0 0 28px; 1716 - color: #334155; 1717 - text-align: left; 1718 - font-size: 18px; 1719 - line-height: 1.6; 1720 -} 1721 - 1722 -#mainContentArea .hero.hero-saas .benefits { 1723 - max-width: 620px; 1724 - margin: 0 0 30px; 1725 - padding: 0; 1726 - display: grid; 1727 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1728 - gap: 10px 24px; 1729 - list-style: none; 1730 - color: #475569; 1731 - font-size: 15px; 1732 - text-align: left; 1733 -} 1734 - 1735 -#mainContentArea .hero.hero-saas .benefits li { 1736 - display: grid; 1737 - grid-template-columns: 18px minmax(0, 1fr); 1738 - column-gap: 8px; 1739 - align-items: start; 1740 - margin: 0; 1741 - line-height: 1.45; 1742 -} 1743 - 1744 -#mainContentArea .hero.hero-saas .benefits li::before { 1745 - content: "✓"; 1746 - display: block; 1747 - width: 18px; 1748 - color: @brand; 1749 - font-weight: 900; 1750 - line-height: 1.45; 1751 - text-align: left; 1752 - margin: 0; 1753 -} 1754 - 1755 -#mainContentArea .hero.hero-saas .hero-actions, 1756 -#mainContentArea .hero.hero-saas #hero-cta { 1757 - display: flex; 1758 - flex-wrap: wrap; 1759 - justify-content: flex-start; 1760 - gap: 12px; 1761 - margin-top: 0; 1762 -} 1763 - 1764 -#mainContentArea .hero-image-wrapper { 1765 - min-width: 0; 1766 - display: flex; 1767 - justify-content: center; 1768 - align-items: center; 1769 -} 1770 - 1771 -#mainContentArea .hero-image { 1772 - display: block; 1773 - width: 100%; 1774 - max-width: 620px; 1775 - height: auto; 1776 - border: 0; 1777 -} 1778 - 1779 -/* ========== Main Page Hero Responsive ========== */ 1780 - 1781 -@media (max-width: 1100px) { 1782 - #mainContentArea .hero-layout { 1783 - max-width: 760px; 1784 - grid-template-columns: 1fr; 1785 - gap: 34px; 1786 - } 1787 - 1788 - #mainContentArea .hero-copy { 1789 - order: 1; 1790 - text-align: center; 1791 - } 1792 - 1793 - #mainContentArea .hero-image-wrapper { 1794 - order: 2; 1795 - } 1796 - 1797 - #mainContentArea .hero.hero-saas h1 { 1798 - margin-left: auto; 1799 - margin-right: auto; 1800 - text-align: center; 1801 - } 1802 - 1803 - #mainContentArea .hero.hero-saas .lead { 1804 - margin-left: auto; 1805 - margin-right: auto; 1806 - text-align: center; 1807 - } 1808 - 1809 - #mainContentArea .hero.hero-saas .benefits { 1810 - margin-left: auto; 1811 - margin-right: auto; 1812 - } 1813 - 1814 - #mainContentArea .hero.hero-saas .hero-actions, 1815 - #mainContentArea .hero.hero-saas #hero-cta { 1816 - justify-content: center; 1817 - } 1818 - 1819 - #mainContentArea .hero-image { 1820 - max-width: 620px; 1821 - } 1822 -} 1823 - 1824 -@media (max-width: 640px) { 1825 - #mainContentArea .hero.hero-saas { 1826 - padding: 42px 0 28px; 1827 - } 1828 - 1829 - #mainContentArea .hero-layout { 1830 - gap: 28px; 1831 - } 1832 - 1833 - #mainContentArea .hero.hero-saas h1 { 1834 - font-size: 42px; 1835 - letter-spacing: -1.5px; 1836 - } 1837 - 1838 - #mainContentArea .hero.hero-saas .lead { 1839 - font-size: 17px; 1840 - } 1841 - 1842 - #mainContentArea .hero.hero-saas .benefits { 1843 - grid-template-columns: 1fr; 1844 - } 1845 - 1846 - #mainContentArea .hero-image { 1847 - max-width: 100%; 1848 - } 1849 -} 1850 - 1851 -/* ========== Accessibility / Contrast Improvements ========== */ 1852 - 1853 -/* Make the global background softer and less distracting. */ 1854 -body { 1855 - background: 1856 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%), 1857 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%), 1858 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important; 1859 - background-attachment: scroll; 1860 -} 1861 - 1862 -/* Keep the article area readable while preserving the page background around it. */ 1863 -#mainContentArea .resource-layout { 1864 - padding: 28px; 1865 - border: 1px solid fade(@line, 85%); 1866 - border-radius: @radius; 1867 - background: rgba(255, 255, 255, .88); 1868 - box-shadow: @shadow-sm; 1869 -} 1870 - 1871 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */ 1872 -#mainContentArea .widget, 1873 -#mainContentArea .pathway-card, 1874 -#mainContentArea .service-card, 1875 -#mainContentArea .resource-card, 1876 -#mainContentArea .services .service, 1877 -#mainContentArea .product-card, 1878 -#mainContentArea .product-feature, 1879 -#mainContentArea .product-summary-card, 1880 -#mainContentArea .product-info-card { 1881 - background: #fff; 1882 -} 1883 - 1884 -/* Make notes more readable and visually stronger. */ 1885 -#mainContentArea .resource-note { 1886 - border: 1px solid fade(@brand, 18%); 1887 - border-left: 4px solid @brand; 1888 - background: #fff; 1889 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045); 1890 -} 1891 - 1892 -/* Keep the sidebar clearly separated from the background. */ 1893 -#mainContentArea .resource-sidebar { 1894 - background: #fff; 1895 -} 1896 - 1897 -/* Make CTA panels stand out more clearly. */ 1898 -#mainContentArea .resource-cta, 1899 -#mainContentArea .resource-inline-cta { 1900 - background: #fff; 1901 -} 1902 - 1903 -/* Improve table readability on long resource pages. */ 1904 -#mainContentArea .resource-content table { 1905 - background: #fff; 1906 -} 1907 - 1908 -#mainContentArea .resource-content table th { 1909 - color: @text; 1910 - background: #F8FAFC; 1911 -} 1912 - 1913 -#mainContentArea .resource-content table td { 1914 - color: @text-soft; 1915 -} 1916 - 1917 -/* Slightly improve paragraph/list contrast in long articles. */ 1918 -#mainContentArea .resource-content p, 1919 -#mainContentArea .resource-content li { 1920 - color: @text-soft; 1921 -} 1922 - 1923 -#mainContentArea .resource-content .resource-note p, 1924 -#mainContentArea .resource-content .resource-checklist li, 1925 -#mainContentArea .resource-content .process-list li { 1926 - color: @muted; 1927 -} 1928 - 1929 -@media (max-width: 900px) { 1930 - #mainContentArea .resource-layout { 1931 - padding: 22px; 1932 - } 1933 -} 1934 - 1935 -@media (max-width: 640px) { 1936 - #mainContentArea .resource-layout { 1937 - padding: 18px; 1938 - border-radius: 14px; 1939 - } 1940 -} 1941 - 1942 - 1642 + */ 1643 +/* Keep large panels readable, but remove their inner gradients. 1644 +.industry-trust-section .industry-trust-panel, 1645 +.cta-panel, 1646 +.resource-inline-cta, 1647 +.resource-note, 1648 +.resource-cta { 1649 + background: #fff !important; 1650 + background-image: none !important; 1651 +} */