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,37 +149,35 @@ 149 149 </div> 150 150 </section> 151 151 152 - <div class="contrast-band-wrapper"> 153 - <section class="contrast-band" aria-labelledby="industry-trust-title"> 154 - <div class="container"> 155 - <div class="contrast-panel"> 156 - <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2> 114 + <section class="industry-trust-section" aria-labelledby="industry-trust-title"> 115 + <div class="container"> 116 + <div class="industry-trust-panel"> 117 + <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2> 157 157 158 - <p class="section-intro">159 - Experience supporting XWiki platforms used in healthcare, financial services, scientific research,160 - government institutions, transportation, software development, compliance programs and regulated environments.161 - </p>119 + <p class="section-intro"> 120 + Experience supporting XWiki platforms used in healthcare, financial services, scientific research, 121 + government institutions, transportation, software development, compliance programs and regulated environments. 122 + </p> 162 162 163 - <div class="contrast-tags" aria-label="Industries and environments supported"> 164 - <span>Healthcare</span> 165 - <span>Financial services</span> 166 - <span>Scientific research</span> 167 - <span>Government institutions</span> 168 - <span>Transportation</span> 169 - <span>Software development</span> 170 - <span>Compliance programs</span> 171 - <span>Regulated environments</span> 172 - </div> 173 - 174 - <p class="contrast-support"> 175 - Organizations rely on these platforms to manage documentation, workflows, compliance processes, 176 - research knowledge and critical business information. From upgrades and authentication integrations 177 - to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future. 178 - </p> 124 + <div class="industry-tags" aria-label="Industries and environments supported"> 125 + <span>Healthcare</span> 126 + <span>Financial services</span> 127 + <span>Scientific research</span> 128 + <span>Government institutions</span> 129 + <span>Transportation</span> 130 + <span>Software development</span> 131 + <span>Compliance programs</span> 132 + <span>Regulated environments</span> 179 179 </div> 134 + 135 + <p class="industry-support"> 136 + Organizations rely on these platforms to manage documentation, workflows, compliance processes, 137 + research knowledge and critical business information. From upgrades and authentication integrations 138 + to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future. 139 + </p> 180 180 </div> 181 - </ section>182 - </ div>141 + </div> 142 + </section> 183 183 184 184 <section class="split-section" aria-labelledby="why-title"> 185 185 <div class="container">
- 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 +/* Old look and feel. 3 3 @brand: #00937D; 4 4 @brand-strong: #007B6A; 5 5 @brand-soft: #E7FFF8; ... ... @@ -12,18 +12,18 @@ 12 12 @shadow: 0 12px 36px rgba(0, 0, 0, .08); 13 13 @maxw: 1140px; 14 14 */ 15 -@brand: #00937D; 15 + 16 +@brand: #00937D; 16 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; 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: 1240px; 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 {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 ========== */ ... ... @@ -179,6 +179,9 @@ 179 179 180 180 &.hero-centered { 181 181 text-align: center; 188 + background: 189 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 190 + 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,63 +247,37 @@ 247 247 margin-top: 22px; 248 248 } 249 249 250 -/* ========== ContrastBand========== */259 +/* ========== Trust Strip ========== */ 251 251 252 -/* Full‑bleed wrapper */ 253 -.contrast-band-wrapper { 254 - position: relative; 255 - overflow: visible; 256 -} 261 +.trust-strip { 262 + padding: 18px 0; 263 + border-top: 1px solid @line; 264 + background: #fff; 257 257 258 -/* Full‑bleed gradient background */ 259 -.contrast-band-wrapper::before { 260 - content: ""; 261 - position: absolute; 262 - top: 0; 263 - left: 50%; 264 - width: 100vw; 265 - height: 100%; 266 - transform: translateX(-50%); 267 - z-index: -1; 266 + ul { 267 + max-width: 960px; 268 + margin: 0 auto; 269 + padding: 0; 270 + list-style: none; 271 + display: flex; 272 + justify-content: center; 273 + gap: 22px; 274 + flex-wrap: wrap; 275 + color: @muted; 276 + font-size: 13px; 277 + } 268 268 269 - background:270 - radial-gradient(circleat 18% 18%,fade(@brand, 22%) 0%, transparent 28%),271 - radial-gradient(circle at86% 12%, fade(@brand, 16%) 0%, transparent30%),272 - linear-gradient(135deg,@text 0%, @text-soft 100%);273 -} 279 + li { 280 + display: flex; 281 + align-items: center; 282 + gap: 7px; 283 + } 274 274 275 -/* Inner band (no gradient here anymore) */ 276 -.contrast-band { 277 - position: relative; 278 - z-index: 0; 279 - padding: 54px 0; 280 - border-top: 0; 281 - color: #fff; 282 - background: none; 285 + i { 286 + color: @brand; 287 + } 283 283 } 284 284 285 -/* Grid overlay */ 286 -.contrast-band::after { 287 - content: ""; 288 - position: absolute; 289 - inset: 0; 290 - background: 291 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 292 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 293 - background-size: 52px 52px; 294 - opacity: .38; 295 - pointer-events: none; 296 - z-index: 0; 297 -} 298 - 299 -/* Content stays above everything */ 300 -.contrast-band .container { 301 - position: relative; 302 - z-index: 1; 303 -} 304 - 305 - 306 - 307 307 /* ========== Reusable Grids ========== */ 308 308 309 309 .card-grid, ... ... @@ -351,6 +351,7 @@ 351 351 .pathway-card, 352 352 .service-card, 353 353 .resource-card { 337 + background: #fff; 354 354 border: 1px solid @line; 355 355 border-radius: @radius; 356 356 box-shadow: @shadow-sm; ... ... @@ -460,6 +460,80 @@ 460 460 } 461 461 } 462 462 447 +.industry-trust-section { 448 + background: 449 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%); 450 + 451 + .industry-trust-panel { 452 + max-width: 1040px; 453 + margin: 0 auto; 454 + padding: 30px 28px; 455 + border: 1px solid fade(@brand, 16%); 456 + border-radius: @radius; 457 + background: 458 + radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%); 459 + box-shadow: @shadow-sm; 460 + text-align: center; 461 + } 462 + 463 + h2 { 464 + margin-bottom: 12px; 465 + } 466 + 467 + .section-intro { 468 + margin-bottom: 20px; 469 + max-width: 820px; 470 + } 471 + 472 + .industry-tags { 473 + max-width: 880px; 474 + margin: 0 auto; 475 + display: flex; 476 + flex-wrap: wrap; 477 + justify-content: center; 478 + gap: 10px; 479 + } 480 + 481 + .industry-tags span { 482 + display: inline-flex; 483 + align-items: center; 484 + padding: 7px 12px; 485 + border: 1px solid fade(@brand, 20%); 486 + border-radius: 999px; 487 + background: #fff; 488 + color: @text; 489 + font-size: 13px; 490 + font-weight: 600; 491 + line-height: 1.2; 492 + box-shadow: 0 3px 10px rgba(0, 0, 0, .04); 493 + } 494 + 495 + .industry-support { 496 + max-width: 820px; 497 + margin: 22px auto 0; 498 + color: @muted; 499 + font-size: 16px; 500 + line-height: 1.6; 501 + } 502 +} 503 + 504 +@media (max-width: 640px) { 505 + .industry-trust-section { 506 + .industry-trust-panel { 507 + padding: 24px 18px; 508 + } 509 + 510 + .industry-tags { 511 + gap: 8px; 512 + } 513 + 514 + .industry-tags span { 515 + font-size: 12px; 516 + padding: 6px 10px; 517 + } 518 + } 519 +} 520 + 463 463 /* ========== Services ========== */ 464 464 465 465 .services { ... ... @@ -472,6 +472,7 @@ 472 472 align-items: flex-start; 473 473 gap: 16px; 474 474 padding: 22px; 533 + background: #fff; 475 475 border: 1px solid @line; 476 476 border-radius: @radius; 477 477 box-shadow: @shadow-sm; ... ... @@ -559,6 +559,7 @@ 559 559 position: relative; 560 560 padding: 16px 16px 16px 58px; 561 561 margin-bottom: 12px; 621 + background: #fff; 562 562 border: 1px solid @line; 563 563 border-radius: @radius; 564 564 box-shadow: @shadow-sm; ... ... @@ -690,8 +690,8 @@ 690 690 691 691 /* ========== CTA ========== */ 692 692 693 - #mainContentArea.cta-section {694 - padding: 44px 0 56px;753 +.cta-section { 754 + padding: @section-padding; 695 695 696 696 .contact-inline { 697 697 margin: 0; ... ... @@ -703,70 +703,27 @@ 703 703 } 704 704 } 705 705 706 -#mainContentArea .cta-panel { 707 - position: relative; 708 - overflow: hidden; 709 - max-width: 1040px; 766 +.cta-panel { 767 + max-width: 860px; 710 710 margin: 0 auto; 711 - padding: 48px40px;712 - border: 0;713 - border -radius:26px;769 + padding: 32px; 770 + border-radius: @radius; 771 + border: 1px solid fade(@brand, 20%); 714 714 background: 715 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%), 716 - linear-gradient(135deg, @text 0%, @text-soft 100%); 717 - color: #fff; 718 - box-shadow: @shadow; 773 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 774 + box-shadow: @shadow-sm; 719 719 text-align: center; 720 -} 721 721 722 -#mainContentArea .cta-panel::before { 723 - content: ""; 724 - position: absolute; 725 - inset: 0; 726 - background: 727 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 728 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 729 - background-size: 48px 48px; 730 - opacity: .4; 731 - pointer-events: none; 732 -} 777 + h2 { 778 + margin-top: 0; 779 + } 733 733 734 -#mainContentArea .cta-panel h2, 735 -#mainContentArea .cta-panel p, 736 -#mainContentArea .cta-panel .btn { 737 - position: relative; 738 - z-index: 1; 781 + p { 782 + color: @muted; 783 + line-height: 1.55; 784 + } 739 739 } 740 740 741 -#mainContentArea .cta-panel h2 { 742 - max-width: 760px; 743 - margin: 0 auto 16px; 744 - color: #fff; 745 -} 746 - 747 -#mainContentArea .cta-panel p { 748 - max-width: 760px; 749 - margin: 0 auto 28px; 750 - color: #DBE4EF; 751 - font-size: 16px; 752 - line-height: 1.6; 753 -} 754 - 755 -#mainContentArea .cta-panel .btn-primary { 756 - border-color: #fff; 757 - background: #fff; 758 - color: @text; 759 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18); 760 -} 761 - 762 -#mainContentArea .cta-panel .btn-primary:hover, 763 -#mainContentArea .cta-panel .btn-primary:focus { 764 - border-color: #fff; 765 - background: #fff; 766 - color: @brand-strong; 767 - text-decoration: none; 768 -} 769 - 770 770 .resource-inline-cta { 771 771 display: flex; 772 772 align-items: center; ... ... @@ -898,14 +898,9 @@ 898 898 gap: 14px; 899 899 } 900 900 901 - #mainContentArea .cta-panel { 902 - padding: 30px 22px; 903 - border-radius: 20px; 918 + .cta-panel { 919 + padding: 24px 20px; 904 904 } 905 - 906 - #mainContentArea .cta-panel .btn-primary { 907 - width: 100%; 908 - } 909 909 } 910 910 911 911 /* ========== Resource / Article Pages ========== */ ... ... @@ -917,6 +917,9 @@ 917 917 .resource-header { 918 918 padding: @section-padding; 919 919 border-top: none; 932 + background: 933 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 934 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 920 920 921 921 h1 { 922 922 margin: 0 auto 14px; ... ... @@ -1064,6 +1064,7 @@ 1064 1064 border: 1px solid @line; 1065 1065 border-radius: @radius; 1066 1066 padding: 18px; 1082 + background: #fff; 1067 1067 box-shadow: @shadow-sm; 1068 1068 1069 1069 h4 { ... ... @@ -1162,6 +1162,7 @@ 1162 1162 1163 1163 .product-card { 1164 1164 position: relative; 1181 + background: #fff; 1165 1165 border: 1px solid @line; 1166 1166 border-radius: @radius; 1167 1167 box-shadow: @shadow-sm; ... ... @@ -1311,6 +1311,7 @@ 1311 1311 .product-info-card, 1312 1312 .product-feature, 1313 1313 .product-gallery-panel { 1331 + background: #fff; 1314 1314 border: 1px solid @line; 1315 1315 border-radius: @radius; 1316 1316 box-shadow: @shadow-sm; ... ... @@ -1553,6 +1553,7 @@ 1553 1553 /* ========== Resources Index ========== */ 1554 1554 1555 1555 .resources-index-page { 1574 + background: #fff; 1556 1556 1557 1557 .services-grid { 1558 1558 grid-template-columns: repeat(2, minmax(0, 1fr)); ... ... @@ -1588,279 +1588,3 @@ 1588 1588 color: @muted; 1589 1589 } 1590 1590 } 1591 - 1592 -/* ========== Global Theme Background ========== */ 1593 - 1594 -html, 1595 -body { 1596 - min-height: 100%; 1597 -} 1598 - 1599 -body { 1600 - color: @text; 1601 - background: 1602 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%), 1603 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%), 1604 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important; 1605 - background-attachment: fixed; 1606 -} 1607 - 1608 -/* ========== Main Page Hero / SaaS Layout ========== */ 1609 - 1610 -#mainContentArea .hero.hero-saas { 1611 - min-height: auto; 1612 - padding: 60px 0 34px; 1613 - display: flex; 1614 - align-items: center; 1615 - overflow: hidden; 1616 - background: transparent; 1617 -} 1618 - 1619 -#mainContentArea .hero-layout { 1620 - max-width: 1120px; 1621 - margin: 0 auto; 1622 - display: grid; 1623 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); 1624 - gap: 56px; 1625 - align-items: center; 1626 -} 1627 - 1628 -#mainContentArea .hero-copy { 1629 - min-width: 0; 1630 - text-align: left; 1631 -} 1632 - 1633 -#mainContentArea .hero.hero-saas h1 { 1634 - max-width: 640px; 1635 - margin: 0 0 26px; 1636 - font-size: 60px; 1637 - font-weight: 800; 1638 - line-height: 1; 1639 - letter-spacing: -3px; 1640 -} 1641 - 1642 -#mainContentArea .hero.hero-saas h1 span { 1643 - color: @brand; 1644 -} 1645 - 1646 -#mainContentArea .hero.hero-saas .lead { 1647 - max-width: 590px; 1648 - margin: 0 0 28px; 1649 - color: #334155; 1650 - text-align: left; 1651 - font-size: 18px; 1652 - line-height: 1.6; 1653 -} 1654 - 1655 -#mainContentArea .hero.hero-saas .benefits { 1656 - max-width: 620px; 1657 - margin: 0 0 30px; 1658 - padding: 0; 1659 - display: grid; 1660 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1661 - gap: 10px 24px; 1662 - list-style: none; 1663 - color: #475569; 1664 - font-size: 15px; 1665 - text-align: left; 1666 -} 1667 - 1668 -#mainContentArea .hero.hero-saas .benefits li { 1669 - display: grid; 1670 - grid-template-columns: 18px minmax(0, 1fr); 1671 - column-gap: 8px; 1672 - align-items: start; 1673 - margin: 0; 1674 - line-height: 1.45; 1675 -} 1676 - 1677 -#mainContentArea .hero.hero-saas .benefits li::before { 1678 - content: "✓"; 1679 - display: block; 1680 - width: 18px; 1681 - color: @brand; 1682 - font-weight: 900; 1683 - line-height: 1.45; 1684 - text-align: left; 1685 - margin: 0; 1686 -} 1687 - 1688 -#mainContentArea .hero.hero-saas .hero-actions, 1689 -#mainContentArea .hero.hero-saas #hero-cta { 1690 - display: flex; 1691 - flex-wrap: wrap; 1692 - justify-content: flex-start; 1693 - gap: 12px; 1694 - margin-top: 0; 1695 -} 1696 - 1697 -#mainContentArea .hero-image-wrapper { 1698 - min-width: 0; 1699 - display: flex; 1700 - justify-content: center; 1701 - align-items: center; 1702 -} 1703 - 1704 -#mainContentArea .hero-image { 1705 - display: block; 1706 - width: 100%; 1707 - max-width: 620px; 1708 - height: auto; 1709 - border: 0; 1710 -} 1711 - 1712 -/* ========== Main Page Hero Responsive ========== */ 1713 - 1714 -@media (max-width: 1100px) { 1715 - #mainContentArea .hero-layout { 1716 - max-width: 760px; 1717 - grid-template-columns: 1fr; 1718 - gap: 34px; 1719 - } 1720 - 1721 - #mainContentArea .hero-copy { 1722 - order: 1; 1723 - text-align: center; 1724 - } 1725 - 1726 - #mainContentArea .hero-image-wrapper { 1727 - order: 2; 1728 - } 1729 - 1730 - #mainContentArea .hero.hero-saas h1 { 1731 - margin-left: auto; 1732 - margin-right: auto; 1733 - text-align: center; 1734 - } 1735 - 1736 - #mainContentArea .hero.hero-saas .lead { 1737 - margin-left: auto; 1738 - margin-right: auto; 1739 - text-align: center; 1740 - } 1741 - 1742 - #mainContentArea .hero.hero-saas .benefits { 1743 - margin-left: auto; 1744 - margin-right: auto; 1745 - } 1746 - 1747 - #mainContentArea .hero.hero-saas .hero-actions, 1748 - #mainContentArea .hero.hero-saas #hero-cta { 1749 - justify-content: center; 1750 - } 1751 - 1752 - #mainContentArea .hero-image { 1753 - max-width: 620px; 1754 - } 1755 -} 1756 - 1757 -@media (max-width: 640px) { 1758 - #mainContentArea .hero.hero-saas { 1759 - padding: 42px 0 28px; 1760 - } 1761 - 1762 - #mainContentArea .hero-layout { 1763 - gap: 28px; 1764 - } 1765 - 1766 - #mainContentArea .hero.hero-saas h1 { 1767 - font-size: 42px; 1768 - letter-spacing: -1.5px; 1769 - } 1770 - 1771 - #mainContentArea .hero.hero-saas .lead { 1772 - font-size: 17px; 1773 - } 1774 - 1775 - #mainContentArea .hero.hero-saas .benefits { 1776 - grid-template-columns: 1fr; 1777 - } 1778 - 1779 - #mainContentArea .hero-image { 1780 - max-width: 100%; 1781 - } 1782 -} 1783 - 1784 -/* ========== Accessibility / Contrast Improvements ========== */ 1785 - 1786 -/* Keep the article area readable while preserving the page background around it. */ 1787 -/*#mainContentArea .resource-layout { 1788 - padding: 28px; 1789 - border: 1px solid fade(@line, 85%); 1790 - border-radius: @radius; 1791 - background: rgba(255, 255, 255, .88); 1792 - box-shadow: @shadow-sm; 1793 -}*/ 1794 - 1795 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */ 1796 -#mainContentArea .widget, 1797 -#mainContentArea .pathway-card, 1798 -#mainContentArea .service-card, 1799 -#mainContentArea .resource-card, 1800 -#mainContentArea .services .service, 1801 -#mainContentArea .product-card, 1802 -#mainContentArea .product-feature, 1803 -#mainContentArea .product-summary-card, 1804 -#mainContentArea .product-info-card { 1805 - background: #fff; 1806 -} 1807 - 1808 -/* Make notes more readable and visually stronger. */ 1809 -#mainContentArea .resource-note { 1810 - border: 1px solid fade(@brand, 18%); 1811 - border-left: 4px solid @brand; 1812 - background: #fff; 1813 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045); 1814 -} 1815 - 1816 -/* Keep the sidebar clearly separated from the background. */ 1817 -#mainContentArea .resource-sidebar { 1818 - background: #fff; 1819 -} 1820 - 1821 -/* Make CTA panels stand out more clearly. */ 1822 -#mainContentArea .resource-cta, 1823 -#mainContentArea .resource-inline-cta { 1824 - background: #fff; 1825 -} 1826 - 1827 -/* Improve table readability on long resource pages. */ 1828 -#mainContentArea .resource-content table { 1829 - background: #fff; 1830 -} 1831 - 1832 -#mainContentArea .resource-content table th { 1833 - color: @text; 1834 - background: #F8FAFC; 1835 -} 1836 - 1837 -#mainContentArea .resource-content table td { 1838 - color: @text-soft; 1839 -} 1840 - 1841 -/* Slightly improve paragraph/list contrast in long articles. */ 1842 -#mainContentArea .resource-content p, 1843 -#mainContentArea .resource-content li { 1844 - color: @text-soft; 1845 -} 1846 - 1847 -#mainContentArea .resource-content .resource-note p, 1848 -#mainContentArea .resource-content .resource-checklist li, 1849 -#mainContentArea .resource-content .process-list li { 1850 - color: @muted; 1851 -} 1852 - 1853 -@media (max-width: 900px) { 1854 - #mainContentArea .resource-layout { 1855 - padding: 22px; 1856 - } 1857 -} 1858 - 1859 -@media (max-width: 640px) { 1860 - #mainContentArea .resource-layout { 1861 - padding: 18px; 1862 - border-radius: 14px; 1863 - } 1864 -} 1865 - 1866 -