Changes for page Public Web Site
Last modified by Agnease on 2026/07/03 16:14
Summary
-
Page properties (3 modified, 0 added, 0 removed)
-
Attachments (0 modified, 0 added, 1 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Default language
-
... ... @@ -1,0 +1,1 @@ 1 +en - Hidden
-
... ... @@ -1,1 +1,1 @@ 1 - true1 +false - 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; ... ... @@ -252,6 +252,7 @@ 252 252 .trust-strip { 253 253 padding: 18px 0; 254 254 border-top: 1px solid @line; 251 + background: #fff; 255 255 256 256 ul { 257 257 max-width: 960px; ... ... @@ -324,6 +324,7 @@ 324 324 .pathway-card, 325 325 .service-card, 326 326 .resource-card { 324 + background: #fff; 327 327 border: 1px solid @line; 328 328 border-radius: @radius; 329 329 box-shadow: @shadow-sm; ... ... @@ -519,6 +519,7 @@ 519 519 align-items: flex-start; 520 520 gap: 16px; 521 521 padding: 22px; 520 + background: #fff; 522 522 border: 1px solid @line; 523 523 border-radius: @radius; 524 524 box-shadow: @shadow-sm; ... ... @@ -606,6 +606,7 @@ 606 606 position: relative; 607 607 padding: 16px 16px 16px 58px; 608 608 margin-bottom: 12px; 608 + background: #fff; 609 609 border: 1px solid @line; 610 610 border-radius: @radius; 611 611 box-shadow: @shadow-sm; ... ... @@ -737,8 +737,8 @@ 737 737 738 738 /* ========== CTA ========== */ 739 739 740 - #mainContentArea.cta-section {741 - padding: 44px 0 56px;740 +.cta-section { 741 + padding: @section-padding; 742 742 743 743 .contact-inline { 744 744 margin: 0; ... ... @@ -750,70 +750,27 @@ 750 750 } 751 751 } 752 752 753 -#mainContentArea .cta-panel { 754 - position: relative; 755 - overflow: hidden; 756 - max-width: 1040px; 753 +.cta-panel { 754 + max-width: 860px; 757 757 margin: 0 auto; 758 - padding: 48px40px;759 - border: 0;760 - border -radius:26px;756 + padding: 32px; 757 + border-radius: @radius; 758 + border: 1px solid fade(@brand, 20%); 761 761 background: 762 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%), 763 - linear-gradient(135deg, @text 0%, @text-soft 100%); 764 - color: #fff; 765 - box-shadow: @shadow; 760 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 761 + box-shadow: @shadow-sm; 766 766 text-align: center; 767 -} 768 768 769 -#mainContentArea .cta-panel::before { 770 - content: ""; 771 - position: absolute; 772 - inset: 0; 773 - background: 774 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 775 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 776 - background-size: 48px 48px; 777 - opacity: .4; 778 - pointer-events: none; 779 -} 764 + h2 { 765 + margin-top: 0; 766 + } 780 780 781 -#mainContentArea .cta-panel h2, 782 -#mainContentArea .cta-panel p, 783 -#mainContentArea .cta-panel .btn { 784 - position: relative; 785 - z-index: 1; 768 + p { 769 + color: @muted; 770 + line-height: 1.55; 771 + } 786 786 } 787 787 788 -#mainContentArea .cta-panel h2 { 789 - max-width: 760px; 790 - margin: 0 auto 16px; 791 - color: #fff; 792 -} 793 - 794 -#mainContentArea .cta-panel p { 795 - max-width: 760px; 796 - margin: 0 auto 28px; 797 - color: #DBE4EF; 798 - font-size: 16px; 799 - line-height: 1.6; 800 -} 801 - 802 -#mainContentArea .cta-panel .btn-primary { 803 - border-color: #fff; 804 - background: #fff; 805 - color: @text; 806 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18); 807 -} 808 - 809 -#mainContentArea .cta-panel .btn-primary:hover, 810 -#mainContentArea .cta-panel .btn-primary:focus { 811 - border-color: #fff; 812 - background: #fff; 813 - color: @brand-strong; 814 - text-decoration: none; 815 -} 816 - 817 817 .resource-inline-cta { 818 818 display: flex; 819 819 align-items: center; ... ... @@ -945,14 +945,9 @@ 945 945 gap: 14px; 946 946 } 947 947 948 - #mainContentArea .cta-panel { 949 - padding: 30px 22px; 950 - border-radius: 20px; 905 + .cta-panel { 906 + padding: 24px 20px; 951 951 } 952 - 953 - #mainContentArea .cta-panel .btn-primary { 954 - width: 100%; 955 - } 956 956 } 957 957 958 958 /* ========== Resource / Article Pages ========== */ ... ... @@ -964,6 +964,9 @@ 964 964 .resource-header { 965 965 padding: @section-padding; 966 966 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%); 967 967 968 968 h1 { 969 969 margin: 0 auto 14px; ... ... @@ -1111,6 +1111,7 @@ 1111 1111 border: 1px solid @line; 1112 1112 border-radius: @radius; 1113 1113 padding: 18px; 1069 + background: #fff; 1114 1114 box-shadow: @shadow-sm; 1115 1115 1116 1116 h4 { ... ... @@ -1200,39 +1200,30 @@ 1200 1200 } 1201 1201 1202 1202 .product-card-grid { 1203 - max-width: 980px;1204 - margin: 2 6px auto 0;1159 + max-width: 840px; 1160 + margin: 22px auto 0; 1205 1205 display: grid; 1206 1206 grid-template-columns: 1fr; 1207 - grid-gap: 22px;1163 + grid-gap: 18px; 1208 1208 } 1209 1209 1210 1210 .product-card { 1211 - position:relative;1167 + background: #fff; 1212 1212 border: 1px solid @line; 1213 1213 border-radius: @radius; 1214 1214 box-shadow: @shadow-sm; 1215 - padding: 32px;1171 + padding: 28px; 1216 1216 display: grid; 1217 - grid-template-columns: 70px 1fr;1218 - grid-gap: 2 4px;1173 + grid-template-columns: 68px 1fr; 1174 + grid-gap: 22px; 1219 1219 align-items: start; 1220 - overflow: hidden; 1221 1221 1222 - &:before { 1223 - content: ""; 1224 - position: absolute; 1225 - inset: 0 auto 0 0; 1226 - width: 5px; 1227 - background: linear-gradient(180deg, @brand 0%, @brand-strong 100%); 1228 - } 1229 - 1230 1230 .product-card-icon { 1231 1231 width: 58px; 1232 1232 height: 58px; 1233 1233 border-radius: 50%; 1234 1234 background: fade(@brand, 10%); 1235 - border: 1px solid fade(@brand, 2 2%);1182 + border: 1px solid fade(@brand, 20%); 1236 1236 color: @brand; 1237 1237 display: flex; 1238 1238 align-items: center; ... ... @@ -1241,15 +1241,11 @@ 1241 1241 flex-shrink: 0; 1242 1242 } 1243 1243 1244 - .product-card-body { 1245 - min-width: 0; 1246 - } 1247 - 1248 1248 h3 { 1249 1249 margin: 0 0 10px; 1250 1250 color: @text; 1251 - font-size: 2 5px;1252 - line-height: 1.2 2;1194 + font-size: 23px; 1195 + line-height: 1.25; 1253 1253 font-weight: 800; 1254 1254 } 1255 1255 ... ... @@ -1258,36 +1258,25 @@ 1258 1258 line-height: 1.6; 1259 1259 } 1260 1260 1261 - .product-card-description { 1262 - max-width: 760px; 1263 - margin: 0 0 14px; 1264 - font-size: 16px; 1204 + .card-link { 1205 + margin: 0; 1206 + 1207 + a { 1208 + font-weight: 700; 1209 + } 1265 1265 } 1266 1266 } 1267 1267 1268 1268 .product-card-kicker { 1269 - display: inline-flex; 1270 - align-items: center; 1271 - gap: 7px; 1272 - width: fit-content; 1273 1273 margin-bottom: 10px; 1274 1274 padding: 5px 10px; 1275 - border: 1px solid fade(@brand, 24%); 1276 - border-radius: 999px; 1277 - background: fade(@brand, 8%); 1278 - color: @brand-strong; 1279 1279 font-size: 12px; 1280 - font-weight: 800; 1281 1281 text-transform: uppercase; 1282 1282 letter-spacing: .04em; 1283 - 1284 - i { 1285 - color: @brand; 1286 - } 1287 1287 } 1288 1288 1289 1289 .product-highlights { 1290 - margin: 14px 0 2 2px;1222 + margin: 14px 0 20px; 1291 1291 padding-left: 18px; 1292 1292 color: @muted; 1293 1293 ... ... @@ -1297,52 +1297,6 @@ 1297 1297 } 1298 1298 } 1299 1299 1300 -.product-card-actions { 1301 - display: flex; 1302 - align-items: center; 1303 - gap: 16px; 1304 - flex-wrap: wrap; 1305 - 1306 - .btn { 1307 - font-weight: 700; 1308 - } 1309 -} 1310 - 1311 -.product-card-contact { 1312 - color: @brand; 1313 - font-weight: 700; 1314 - text-decoration: underline; 1315 - 1316 - &:hover, 1317 - &:focus { 1318 - color: @brand-strong; 1319 - } 1320 -} 1321 - 1322 -@media (max-width: 640px) { 1323 - .product-card { 1324 - grid-template-columns: 1fr; 1325 - padding: 26px 22px; 1326 - text-align: left; 1327 - 1328 - &:before { 1329 - width: 4px; 1330 - } 1331 - 1332 - .product-card-icon { 1333 - margin-bottom: 2px; 1334 - } 1335 - 1336 - h3 { 1337 - font-size: 22px; 1338 - } 1339 - } 1340 - 1341 - .product-card-actions { 1342 - gap: 12px; 1343 - } 1344 -} 1345 - 1346 1346 /* ========== Individual Product Pages ========== */ 1347 1347 1348 1348 .product-layout { ... ... @@ -1358,6 +1358,7 @@ 1358 1358 .product-info-card, 1359 1359 .product-feature, 1360 1360 .product-gallery-panel { 1247 + background: #fff; 1361 1361 border: 1px solid @line; 1362 1362 border-radius: @radius; 1363 1363 box-shadow: @shadow-sm; ... ... @@ -1405,7 +1405,7 @@ 1405 1405 1406 1406 li { 1407 1407 margin: 8px 0; 1408 - line-height: 1. 3;1295 + line-height: 1.45; 1409 1409 } 1410 1410 } 1411 1411 ... ... @@ -1472,14 +1472,6 @@ 1472 1472 text-align: center; 1473 1473 } 1474 1474 1475 -/* Keep the default XWiki gallery style. 1476 - Only add spacing before it and center it. */ 1477 -.gallery.xGallery { 1478 - margin: 25px auto; 1479 - width: 920px; 1480 - height: 518px; 1481 -} 1482 - 1483 1483 .product-section-muted { 1484 1484 background: 1485 1485 radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); ... ... @@ -1583,10 +1583,6 @@ 1583 1583 } 1584 1584 } 1585 1585 1586 - .gallery.xGallery { 1587 - margin-top: 22px !important; 1588 - } 1589 - 1590 1590 .product-gallery-caption { 1591 1591 margin-top: 10px; 1592 1592 padding: 0 14px; ... ... @@ -1600,6 +1600,7 @@ 1600 1600 /* ========== Resources Index ========== */ 1601 1601 1602 1602 .resources-index-page { 1478 + background: #fff; 1603 1603 1604 1604 .services-grid { 1605 1605 grid-template-columns: repeat(2, minmax(0, 1fr)); ... ... @@ -1635,321 +1635,3 @@ 1635 1635 color: @muted; 1636 1636 } 1637 1637 } 1638 - 1639 -/* ========== Global Theme Background ========== */ 1640 - 1641 -html, 1642 -body { 1643 - min-height: 100%; 1644 -} 1645 - 1646 -body { 1647 - color: @text; 1648 - background: 1649 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%), 1650 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%), 1651 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important; 1652 - background-attachment: fixed; 1653 -} 1654 - 1655 -/* Let the body background show through the XWiki wrappers. 1656 -#mainContentArea, 1657 -.resource-page, 1658 -.resources-index-page { 1659 - background: transparent !important; 1660 - background-image: none !important; 1661 -} 1662 -*/ 1663 -/* Remove local decorative backgrounds that compete with the global gradient. 1664 -.hero, 1665 -.hero.hero-centered, 1666 -.trust-strip, 1667 -.industry-trust-section, 1668 -.split-section, 1669 -.resource-strip, 1670 -.homepage-resource-strip, 1671 -.resource-header, 1672 -.product-section-muted, 1673 -.resources-index-page { 1674 - background: transparent !important; 1675 - background-image: none !important; 1676 -} 1677 - */ 1678 -/* Keep large panels readable, but remove their inner gradients. 1679 -.industry-trust-section .industry-trust-panel, 1680 -.cta-panel, 1681 -.resource-inline-cta, 1682 -.resource-note, 1683 -.resource-cta { 1684 - background: #fff !important; 1685 - background-image: none !important; 1686 -} */ 1687 - 1688 -/* ========== Main Page Hero / SaaS Layout ========== */ 1689 - 1690 -#mainContentArea .hero.hero-saas { 1691 - min-height: auto; 1692 - padding: 60px 0 34px; 1693 - display: flex; 1694 - align-items: center; 1695 - overflow: hidden; 1696 - background: transparent; 1697 -} 1698 - 1699 -#mainContentArea .hero-layout { 1700 - max-width: 1120px; 1701 - margin: 0 auto; 1702 - display: grid; 1703 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); 1704 - gap: 56px; 1705 - align-items: center; 1706 -} 1707 - 1708 -#mainContentArea .hero-copy { 1709 - min-width: 0; 1710 - text-align: left; 1711 -} 1712 - 1713 -#mainContentArea .hero.hero-saas h1 { 1714 - max-width: 640px; 1715 - margin: 0 0 26px; 1716 - font-size: 60px; 1717 - font-weight: 800; 1718 - line-height: 1; 1719 - letter-spacing: -3px; 1720 -} 1721 - 1722 -#mainContentArea .hero.hero-saas h1 span { 1723 - color: @brand; 1724 -} 1725 - 1726 -#mainContentArea .hero.hero-saas .lead { 1727 - max-width: 590px; 1728 - margin: 0 0 28px; 1729 - color: #334155; 1730 - text-align: left; 1731 - font-size: 18px; 1732 - line-height: 1.6; 1733 -} 1734 - 1735 -#mainContentArea .hero.hero-saas .benefits { 1736 - max-width: 620px; 1737 - margin: 0 0 30px; 1738 - padding: 0; 1739 - display: grid; 1740 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1741 - gap: 10px 24px; 1742 - list-style: none; 1743 - color: #475569; 1744 - font-size: 15px; 1745 - text-align: left; 1746 -} 1747 - 1748 -#mainContentArea .hero.hero-saas .benefits li { 1749 - display: grid; 1750 - grid-template-columns: 18px minmax(0, 1fr); 1751 - column-gap: 8px; 1752 - align-items: start; 1753 - margin: 0; 1754 - line-height: 1.45; 1755 -} 1756 - 1757 -#mainContentArea .hero.hero-saas .benefits li::before { 1758 - content: "✓"; 1759 - display: block; 1760 - width: 18px; 1761 - color: @brand; 1762 - font-weight: 900; 1763 - line-height: 1.45; 1764 - text-align: left; 1765 - margin: 0; 1766 -} 1767 - 1768 -#mainContentArea .hero.hero-saas .hero-actions, 1769 -#mainContentArea .hero.hero-saas #hero-cta { 1770 - display: flex; 1771 - flex-wrap: wrap; 1772 - justify-content: flex-start; 1773 - gap: 12px; 1774 - margin-top: 0; 1775 -} 1776 - 1777 -#mainContentArea .hero-image-wrapper { 1778 - min-width: 0; 1779 - display: flex; 1780 - justify-content: center; 1781 - align-items: center; 1782 -} 1783 - 1784 -#mainContentArea .hero-image { 1785 - display: block; 1786 - width: 100%; 1787 - max-width: 620px; 1788 - height: auto; 1789 - border: 0; 1790 -} 1791 - 1792 -/* ========== Main Page Hero Responsive ========== */ 1793 - 1794 -@media (max-width: 1100px) { 1795 - #mainContentArea .hero-layout { 1796 - max-width: 760px; 1797 - grid-template-columns: 1fr; 1798 - gap: 34px; 1799 - } 1800 - 1801 - #mainContentArea .hero-copy { 1802 - order: 1; 1803 - text-align: center; 1804 - } 1805 - 1806 - #mainContentArea .hero-image-wrapper { 1807 - order: 2; 1808 - } 1809 - 1810 - #mainContentArea .hero.hero-saas h1 { 1811 - margin-left: auto; 1812 - margin-right: auto; 1813 - text-align: center; 1814 - } 1815 - 1816 - #mainContentArea .hero.hero-saas .lead { 1817 - margin-left: auto; 1818 - margin-right: auto; 1819 - text-align: center; 1820 - } 1821 - 1822 - #mainContentArea .hero.hero-saas .benefits { 1823 - margin-left: auto; 1824 - margin-right: auto; 1825 - } 1826 - 1827 - #mainContentArea .hero.hero-saas .hero-actions, 1828 - #mainContentArea .hero.hero-saas #hero-cta { 1829 - justify-content: center; 1830 - } 1831 - 1832 - #mainContentArea .hero-image { 1833 - max-width: 620px; 1834 - } 1835 -} 1836 - 1837 -@media (max-width: 640px) { 1838 - #mainContentArea .hero.hero-saas { 1839 - padding: 42px 0 28px; 1840 - } 1841 - 1842 - #mainContentArea .hero-layout { 1843 - gap: 28px; 1844 - } 1845 - 1846 - #mainContentArea .hero.hero-saas h1 { 1847 - font-size: 42px; 1848 - letter-spacing: -1.5px; 1849 - } 1850 - 1851 - #mainContentArea .hero.hero-saas .lead { 1852 - font-size: 17px; 1853 - } 1854 - 1855 - #mainContentArea .hero.hero-saas .benefits { 1856 - grid-template-columns: 1fr; 1857 - } 1858 - 1859 - #mainContentArea .hero-image { 1860 - max-width: 100%; 1861 - } 1862 -} 1863 - 1864 -/* ========== Accessibility / Contrast Improvements ========== */ 1865 - 1866 -/* Make the global background softer and less distracting. */ 1867 -body { 1868 - background: 1869 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%), 1870 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%), 1871 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important; 1872 - background-attachment: scroll; 1873 -} 1874 - 1875 -/* Keep the article area readable while preserving the page background around it. */ 1876 -#mainContentArea .resource-layout { 1877 - padding: 28px; 1878 - border: 1px solid fade(@line, 85%); 1879 - border-radius: @radius; 1880 - background: rgba(255, 255, 255, .88); 1881 - box-shadow: @shadow-sm; 1882 -} 1883 - 1884 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */ 1885 -#mainContentArea .widget, 1886 -#mainContentArea .pathway-card, 1887 -#mainContentArea .service-card, 1888 -#mainContentArea .resource-card, 1889 -#mainContentArea .services .service, 1890 -#mainContentArea .product-card, 1891 -#mainContentArea .product-feature, 1892 -#mainContentArea .product-summary-card, 1893 -#mainContentArea .product-info-card { 1894 - background: #fff; 1895 -} 1896 - 1897 -/* Make notes more readable and visually stronger. */ 1898 -#mainContentArea .resource-note { 1899 - border: 1px solid fade(@brand, 18%); 1900 - border-left: 4px solid @brand; 1901 - background: #fff; 1902 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045); 1903 -} 1904 - 1905 -/* Keep the sidebar clearly separated from the background. */ 1906 -#mainContentArea .resource-sidebar { 1907 - background: #fff; 1908 -} 1909 - 1910 -/* Make CTA panels stand out more clearly. */ 1911 -#mainContentArea .resource-cta, 1912 -#mainContentArea .resource-inline-cta { 1913 - background: #fff; 1914 -} 1915 - 1916 -/* Improve table readability on long resource pages. */ 1917 -#mainContentArea .resource-content table { 1918 - background: #fff; 1919 -} 1920 - 1921 -#mainContentArea .resource-content table th { 1922 - color: @text; 1923 - background: #F8FAFC; 1924 -} 1925 - 1926 -#mainContentArea .resource-content table td { 1927 - color: @text-soft; 1928 -} 1929 - 1930 -/* Slightly improve paragraph/list contrast in long articles. */ 1931 -#mainContentArea .resource-content p, 1932 -#mainContentArea .resource-content li { 1933 - color: @text-soft; 1934 -} 1935 - 1936 -#mainContentArea .resource-content .resource-note p, 1937 -#mainContentArea .resource-content .resource-checklist li, 1938 -#mainContentArea .resource-content .process-list li { 1939 - color: @muted; 1940 -} 1941 - 1942 -@media (max-width: 900px) { 1943 - #mainContentArea .resource-layout { 1944 - padding: 22px; 1945 - } 1946 -} 1947 - 1948 -@media (max-width: 640px) { 1949 - #mainContentArea .resource-layout { 1950 - padding: 18px; 1951 - border-radius: 14px; 1952 - } 1953 -} 1954 - 1955 -