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)
-
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,95 +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 - <p class="lead"> 11 - Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care. 12 - </p> 13 - <ul class="benefits"> 14 - <li>XWiki LTS upgrades</li> 15 - <li>Maintenance and support</li> 16 - <li>Custom XWiki development</li> 17 - <li>Migrations and integrations</li> 18 - </ul> 19 - <div class="hero-actions" id="hero-cta"> 20 - <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06"> 21 - Book a free discussion 22 - </a> 23 - <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a> 24 - </div> 25 - </div> 26 - <div class="hero-visual" aria-hidden="true"> 27 - <div class="hero-browser"> 28 - <div class="hero-browser-top"> 29 - <div class="hero-dot"></div> 30 - <div class="hero-dot"></div> 31 - <div class="hero-dot"></div> 32 - <div class="hero-search"></div> 33 - </div> 34 - <div class="hero-browser-body"> 35 - <div class="hero-sidebar"> 36 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Home</div> 37 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Documentation</div> 38 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Processes</div> 39 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Policies</div> 40 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Teams</div> 41 - </div> 42 - <div class="hero-content-panel"> 43 - <div class="hero-panel-title">Production XWiki Platform</div> 44 - <div class="hero-skeleton"></div> 45 - <div class="hero-skeleton"></div> 46 - <div class="hero-skeleton short"></div> 47 - <div class="hero-dashboard-grid"> 48 - <div class="hero-mini-card"> 49 - <h4>Recent work</h4> 50 - <div class="hero-status-row"><span class="hero-status-dot"></span>LTS upgrade plan</div> 51 - <div class="hero-status-row"><span class="hero-status-dot"></span>Extension review</div> 52 - <div class="hero-status-row"><span class="hero-status-dot"></span>Production validation</div> 53 - </div> 54 - <div class="hero-mini-card"> 55 - <h4>Platform care</h4> 56 - <div class="hero-status-row"><span class="hero-status-dot"></span>Permissions</div> 57 - <div class="hero-status-row"><span class="hero-status-dot"></span>Authentication</div> 58 - <div class="hero-status-row"><span class="hero-status-dot"></span>Maintainability</div> 59 - </div> 60 - </div> 61 - </div> 62 - </div> 63 - </div> 64 - <div class="hero-floating hero-upgrade-card"> 65 - <div class="hero-card-title">Upgrade with confidence</div> 66 - <div class="hero-version-flow"> 67 - <div class="hero-version">XWiki<br/>LTS</div> 68 - <div class="hero-arrow">→</div> 69 - <div class="hero-version">Staging</div> 70 - <div class="hero-arrow">→</div> 71 - <div class="hero-version active">Production</div> 72 - </div> 73 - </div> 74 - <div class="hero-floating hero-security-card"> 75 - <div class="hero-card-title">Security-aware maintenance</div> 76 - <ul> 77 - <li>Permissions review</li> 78 - <li>Authentication support</li> 79 - <li>Audit and traceability</li> 80 - </ul> 81 - </div> 82 - <div class="hero-flow"> 83 - <div class="hero-env">Review</div> 84 - <div class="hero-arrow">→</div> 85 - <div class="hero-env">Plan</div> 86 - <div class="hero-arrow">→</div> 87 - <div class="hero-env">Validate</div> 88 - </div> 89 - </div> 90 - </div> 91 - </div> 92 - </section> 93 -#* 5 + 94 94 <section class="hero hero-centered" aria-labelledby="hero-title"> 95 95 <div class="container hero-inner"> 96 96 <h1 id="hero-title">Professional XWiki consulting and engineering</h1> ... ... @@ -114,7 +114,7 @@ 114 114 </div> 115 115 </div> 116 116 </section> 117 - *#29 + 118 118 <section class="trust-strip" aria-label="Agnease experience"> 119 119 <div class="container"> 120 120 <ul>
- 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,11 +162,18 @@ 162 162 color: #fff; 163 163 } 164 164 } 165 - */152 + 166 166 .btn-secondary { 167 - color: @text; 168 - border: 1px solid fade(@text, 35%); 154 + color: @brand; 155 + background: #fff; 156 + border: 1px solid fade(@brand, 35%); 169 169 158 + &:hover, 159 + &:focus { 160 + color: @brand-strong; 161 + border-color: @brand; 162 + background: @brand-bg; 163 + } 170 170 } 171 171 172 172 /* ========== Hero ========== */ ... ... @@ -178,6 +178,9 @@ 178 178 179 179 &.hero-centered { 180 180 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%); 181 181 display: flex; 182 182 align-items: center; 183 183 justify-content: center; ... ... @@ -251,6 +251,7 @@ 251 251 .trust-strip { 252 252 padding: 18px 0; 253 253 border-top: 1px solid @line; 251 + background: #fff; 254 254 255 255 ul { 256 256 max-width: 960px; ... ... @@ -323,6 +323,7 @@ 323 323 .pathway-card, 324 324 .service-card, 325 325 .resource-card { 324 + background: #fff; 326 326 border: 1px solid @line; 327 327 border-radius: @radius; 328 328 box-shadow: @shadow-sm; ... ... @@ -518,6 +518,7 @@ 518 518 align-items: flex-start; 519 519 gap: 16px; 520 520 padding: 22px; 520 + background: #fff; 521 521 border: 1px solid @line; 522 522 border-radius: @radius; 523 523 box-shadow: @shadow-sm; ... ... @@ -605,6 +605,7 @@ 605 605 position: relative; 606 606 padding: 16px 16px 16px 58px; 607 607 margin-bottom: 12px; 608 + background: #fff; 608 608 border: 1px solid @line; 609 609 border-radius: @radius; 610 610 box-shadow: @shadow-sm; ... ... @@ -755,6 +755,8 @@ 755 755 padding: 32px; 756 756 border-radius: @radius; 757 757 border: 1px solid fade(@brand, 20%); 759 + background: 760 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 758 758 box-shadow: @shadow-sm; 759 759 text-align: center; 760 760 ... ... @@ -913,6 +913,9 @@ 913 913 .resource-header { 914 914 padding: @section-padding; 915 915 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%); 916 916 917 917 h1 { 918 918 margin: 0 auto 14px; ... ... @@ -1060,6 +1060,7 @@ 1060 1060 border: 1px solid @line; 1061 1061 border-radius: @radius; 1062 1062 padding: 18px; 1069 + background: #fff; 1063 1063 box-shadow: @shadow-sm; 1064 1064 1065 1065 h4 { ... ... @@ -1149,39 +1149,30 @@ 1149 1149 } 1150 1150 1151 1151 .product-card-grid { 1152 - max-width: 980px;1153 - margin: 2 6px auto 0;1159 + max-width: 840px; 1160 + margin: 22px auto 0; 1154 1154 display: grid; 1155 1155 grid-template-columns: 1fr; 1156 - grid-gap: 22px;1163 + grid-gap: 18px; 1157 1157 } 1158 1158 1159 1159 .product-card { 1160 - position:relative;1167 + background: #fff; 1161 1161 border: 1px solid @line; 1162 1162 border-radius: @radius; 1163 1163 box-shadow: @shadow-sm; 1164 - padding: 32px;1171 + padding: 28px; 1165 1165 display: grid; 1166 - grid-template-columns: 70px 1fr;1167 - grid-gap: 2 4px;1173 + grid-template-columns: 68px 1fr; 1174 + grid-gap: 22px; 1168 1168 align-items: start; 1169 - overflow: hidden; 1170 1170 1171 - &:before { 1172 - content: ""; 1173 - position: absolute; 1174 - inset: 0 auto 0 0; 1175 - width: 5px; 1176 - background: linear-gradient(180deg, @brand 0%, @brand-strong 100%); 1177 - } 1178 - 1179 1179 .product-card-icon { 1180 1180 width: 58px; 1181 1181 height: 58px; 1182 1182 border-radius: 50%; 1183 1183 background: fade(@brand, 10%); 1184 - border: 1px solid fade(@brand, 2 2%);1182 + border: 1px solid fade(@brand, 20%); 1185 1185 color: @brand; 1186 1186 display: flex; 1187 1187 align-items: center; ... ... @@ -1190,15 +1190,11 @@ 1190 1190 flex-shrink: 0; 1191 1191 } 1192 1192 1193 - .product-card-body { 1194 - min-width: 0; 1195 - } 1196 - 1197 1197 h3 { 1198 1198 margin: 0 0 10px; 1199 1199 color: @text; 1200 - font-size: 2 5px;1201 - line-height: 1.2 2;1194 + font-size: 23px; 1195 + line-height: 1.25; 1202 1202 font-weight: 800; 1203 1203 } 1204 1204 ... ... @@ -1207,36 +1207,25 @@ 1207 1207 line-height: 1.6; 1208 1208 } 1209 1209 1210 - .product-card-description { 1211 - max-width: 760px; 1212 - margin: 0 0 14px; 1213 - font-size: 16px; 1204 + .card-link { 1205 + margin: 0; 1206 + 1207 + a { 1208 + font-weight: 700; 1209 + } 1214 1214 } 1215 1215 } 1216 1216 1217 1217 .product-card-kicker { 1218 - display: inline-flex; 1219 - align-items: center; 1220 - gap: 7px; 1221 - width: fit-content; 1222 1222 margin-bottom: 10px; 1223 1223 padding: 5px 10px; 1224 - border: 1px solid fade(@brand, 24%); 1225 - border-radius: 999px; 1226 - background: fade(@brand, 8%); 1227 - color: @brand-strong; 1228 1228 font-size: 12px; 1229 - font-weight: 800; 1230 1230 text-transform: uppercase; 1231 1231 letter-spacing: .04em; 1232 - 1233 - i { 1234 - color: @brand; 1235 - } 1236 1236 } 1237 1237 1238 1238 .product-highlights { 1239 - margin: 14px 0 2 2px;1222 + margin: 14px 0 20px; 1240 1240 padding-left: 18px; 1241 1241 color: @muted; 1242 1242 ... ... @@ -1246,52 +1246,6 @@ 1246 1246 } 1247 1247 } 1248 1248 1249 -.product-card-actions { 1250 - display: flex; 1251 - align-items: center; 1252 - gap: 16px; 1253 - flex-wrap: wrap; 1254 - 1255 - .btn { 1256 - font-weight: 700; 1257 - } 1258 -} 1259 - 1260 -.product-card-contact { 1261 - color: @brand; 1262 - font-weight: 700; 1263 - text-decoration: underline; 1264 - 1265 - &:hover, 1266 - &:focus { 1267 - color: @brand-strong; 1268 - } 1269 -} 1270 - 1271 -@media (max-width: 640px) { 1272 - .product-card { 1273 - grid-template-columns: 1fr; 1274 - padding: 26px 22px; 1275 - text-align: left; 1276 - 1277 - &:before { 1278 - width: 4px; 1279 - } 1280 - 1281 - .product-card-icon { 1282 - margin-bottom: 2px; 1283 - } 1284 - 1285 - h3 { 1286 - font-size: 22px; 1287 - } 1288 - } 1289 - 1290 - .product-card-actions { 1291 - gap: 12px; 1292 - } 1293 -} 1294 - 1295 1295 /* ========== Individual Product Pages ========== */ 1296 1296 1297 1297 .product-layout { ... ... @@ -1307,6 +1307,7 @@ 1307 1307 .product-info-card, 1308 1308 .product-feature, 1309 1309 .product-gallery-panel { 1247 + background: #fff; 1310 1310 border: 1px solid @line; 1311 1311 border-radius: @radius; 1312 1312 box-shadow: @shadow-sm; ... ... @@ -1354,7 +1354,7 @@ 1354 1354 1355 1355 li { 1356 1356 margin: 8px 0; 1357 - line-height: 1. 3;1295 + line-height: 1.45; 1358 1358 } 1359 1359 } 1360 1360 ... ... @@ -1424,9 +1424,9 @@ 1424 1424 /* Keep the default XWiki gallery style. 1425 1425 Only add spacing before it and center it. */ 1426 1426 .gallery.xGallery { 1427 - margin: 2 5pxauto;1428 - width:920px;1429 - height:518px;1365 + margin-top: 26px; 1366 + margin-left: auto; 1367 + margin-right: auto !important; 1430 1430 } 1431 1431 1432 1432 .product-section-muted { ... ... @@ -1549,6 +1549,7 @@ 1549 1549 /* ========== Resources Index ========== */ 1550 1550 1551 1551 .resources-index-page { 1490 + background: #fff; 1552 1552 1553 1553 .services-grid { 1554 1554 grid-template-columns: repeat(2, minmax(0, 1fr)); ... ... @@ -1584,332 +1584,3 @@ 1584 1584 color: @muted; 1585 1585 } 1586 1586 } 1587 - 1588 -/* ========== Global Theme Background ========== */ 1589 - 1590 -html, 1591 -body { 1592 - min-height: 100%; 1593 -} 1594 - 1595 -body { 1596 - color: @text; 1597 - background: 1598 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%), 1599 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%), 1600 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important; 1601 - background-attachment: fixed; 1602 -} 1603 - 1604 -/* Let the body background show through the XWiki wrappers. 1605 -#mainContentArea, 1606 -.resource-page, 1607 -.resources-index-page { 1608 - background: transparent !important; 1609 - background-image: none !important; 1610 -} 1611 -*/ 1612 -/* Remove local decorative backgrounds that compete with the global gradient. 1613 -.hero, 1614 -.hero.hero-centered, 1615 -.trust-strip, 1616 -.industry-trust-section, 1617 -.split-section, 1618 -.resource-strip, 1619 -.homepage-resource-strip, 1620 -.resource-header, 1621 -.product-section-muted, 1622 -.resources-index-page { 1623 - background: transparent !important; 1624 - background-image: none !important; 1625 -} 1626 - */ 1627 -/* Keep large panels readable, but remove their inner gradients. 1628 -.industry-trust-section .industry-trust-panel, 1629 -.cta-panel, 1630 -.resource-inline-cta, 1631 -.resource-note, 1632 -.resource-cta { 1633 - background: #fff !important; 1634 - background-image: none !important; 1635 -} */ 1636 - 1637 - 1638 -/* ========== Hero ========== */ 1639 -#mainContentArea .hero.hero-saas { 1640 - min-height: auto; 1641 - padding: 60px 0 34px; 1642 - display: flex; 1643 - align-items: center; 1644 - overflow: hidden; 1645 - background: transparent; 1646 -} 1647 -#mainContentArea .hero-layout { 1648 - max-width: 1120px; 1649 - margin: 0 auto; 1650 - display: grid; 1651 - grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); 1652 - gap: 56px; 1653 - align-items: center; 1654 -} 1655 -#mainContentArea .hero-copy, 1656 -#mainContentArea .hero.hero-saas .lead { 1657 - text-align: left; 1658 -} 1659 -#mainContentArea .hero.hero-saas h1 { 1660 - max-width: 640px; 1661 - margin: 0 0 26px; 1662 - font-size: 60px; 1663 - font-weight: 800; 1664 - line-height: 1; 1665 - letter-spacing: -3px; 1666 -} 1667 -#mainContentArea .hero.hero-saas h1 span { 1668 - color: @brand; 1669 -} 1670 -#mainContentArea .hero.hero-saas .lead { 1671 - max-width: 590px; 1672 - margin: 0 0 28px; 1673 - color: #334155; 1674 - font-size: 18px; 1675 - line-height: 1.6; 1676 -} 1677 -#mainContentArea .hero.hero-saas .benefits { 1678 - max-width: 620px; 1679 - margin: 0 0 30px; 1680 - padding: 0; 1681 - display: grid; 1682 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1683 - gap: 10px 24px; 1684 - list-style: none; 1685 - color: #475569; 1686 - font-size: 15px; 1687 - text-align: left; 1688 -} 1689 -#mainContentArea .hero.hero-saas .benefits li { 1690 - display: grid; 1691 - grid-template-columns: 18px minmax(0, 1fr); 1692 - column-gap: 8px; 1693 - align-items: start; 1694 - margin: 0; 1695 - line-height: 1.45; 1696 -} 1697 -#mainContentArea .hero.hero-saas .benefits li::before { 1698 - content: "✓"; 1699 - display: block; 1700 - width: 18px; 1701 - color: @brand; 1702 - font-weight: 900; 1703 - line-height: 1.45; 1704 - text-align: left; 1705 - margin: 0; 1706 -} 1707 -#mainContentArea .hero-actions, 1708 -#mainContentArea #hero-cta { 1709 - display: flex; 1710 - flex-wrap: wrap; 1711 - justify-content: flex-start; 1712 - gap: 12px; 1713 -} 1714 -#mainContentArea .hero-visual { 1715 - position: relative; 1716 - min-height: 540px; 1717 -} 1718 -#mainContentArea .hero-browser, 1719 -#mainContentArea .hero-floating { 1720 - border: 1px solid @line; 1721 - background: fade(#fff, 94%); 1722 - box-shadow: @shadow; 1723 - backdrop-filter: blur(14px); 1724 -} 1725 -#mainContentArea .hero-browser { 1726 - position: absolute; 1727 - top: 8px; 1728 - right: 0; 1729 - width: 100%; 1730 - max-width: 720px; 1731 - overflow: hidden; 1732 - border-radius: 18px; 1733 - background: fade(#fff, 88%); 1734 -} 1735 -#mainContentArea .hero-browser-top { 1736 - height: 58px; 1737 - display: flex; 1738 - align-items: center; 1739 - gap: 10px; 1740 - padding: 0 24px; 1741 - border-bottom: 1px solid @line; 1742 - background: fade(#fff, 74%); 1743 -} 1744 -#mainContentArea .hero-dot, 1745 -#mainContentArea .hero-status-dot { 1746 - border-radius: 50%; 1747 -} 1748 -#mainContentArea .hero-dot { 1749 - width: 10px; 1750 - height: 10px; 1751 - background: #CBD5E1; 1752 -} 1753 -#mainContentArea .hero-status-dot { 1754 - width: 8px; 1755 - height: 8px; 1756 - background: @brand; 1757 -} 1758 -#mainContentArea .hero-search { 1759 - margin-left: auto; 1760 - width: 170px; 1761 - height: 26px; 1762 - border: 1px solid #E2E8F0; 1763 - border-radius: 20px; 1764 - background: #F1F5F9; 1765 -} 1766 -#mainContentArea .hero-browser-body { 1767 - display: grid; 1768 - grid-template-columns: 150px minmax(0, 1fr); 1769 -} 1770 -#mainContentArea .hero-sidebar { 1771 - padding: 24px 18px; 1772 - border-right: 1px solid @line; 1773 - background: #F8FAFC; 1774 -} 1775 -#mainContentArea .hero-nav-item, 1776 -#mainContentArea .hero-status-row, 1777 -#mainContentArea .hero-version-flow, 1778 -#mainContentArea .hero-flow { 1779 - display: flex; 1780 - align-items: center; 1781 -} 1782 -#mainContentArea .hero-nav-item { 1783 - gap: 9px; 1784 - padding: 10px 8px; 1785 - color: #334155; 1786 - font-size: 13px; 1787 -} 1788 -#mainContentArea .hero-nav-icon { 1789 - width: 20px; 1790 - height: 20px; 1791 - border: 1px solid #CBD5E1; 1792 - border-radius: 5px; 1793 -} 1794 -#mainContentArea .hero-content-panel { 1795 - padding: 26px; 1796 -} 1797 -#mainContentArea .hero-panel-title, 1798 -#mainContentArea .hero-card-title { 1799 - color: @text; 1800 - font-weight: 800; 1801 -} 1802 -#mainContentArea .hero-panel-title { 1803 - margin-bottom: 18px; 1804 - font-size: 20px; 1805 -} 1806 -#mainContentArea .hero-skeleton { 1807 - height: 8px; 1808 - margin-bottom: 10px; 1809 - border-radius: 10px; 1810 - background: #E2E8F0; 1811 -} 1812 -#mainContentArea .hero-skeleton.short { 1813 - width: 64%; 1814 -} 1815 -#mainContentArea .hero-dashboard-grid { 1816 - margin-top: 28px; 1817 - display: grid; 1818 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1819 - gap: 18px; 1820 -} 1821 -#mainContentArea .hero-mini-card { 1822 - padding: 18px; 1823 - border: 1px solid @line; 1824 - border-radius: 14px; 1825 - background: #fff; 1826 -} 1827 -#mainContentArea .hero-mini-card h4 { 1828 - margin: 0 0 14px; 1829 - font-size: 15px; 1830 -} 1831 -#mainContentArea .hero-status-row { 1832 - gap: 10px; 1833 - margin: 11px 0; 1834 - color: #475569; 1835 - font-size: 13px; 1836 -} 1837 -#mainContentArea .hero-floating { 1838 - position: absolute; 1839 - border-radius: 16px; 1840 -} 1841 -#mainContentArea .hero-upgrade-card { 1842 - left: 0; 1843 - bottom: 72px; 1844 - width: 320px; 1845 - padding: 20px; 1846 -} 1847 -#mainContentArea .hero-security-card { 1848 - right: 20px; 1849 - top: 260px; 1850 - width: 260px; 1851 - padding: 22px; 1852 -} 1853 -#mainContentArea .hero-security-card ul { 1854 - margin: 0; 1855 - padding: 0; 1856 - list-style: none; 1857 -} 1858 -#mainContentArea .hero-security-card li { 1859 - margin: 12px 0; 1860 - font-size: 14px; 1861 -} 1862 -#mainContentArea .hero-security-card li::before { 1863 - content: "✓"; 1864 - margin-right: 8px; 1865 - color: @brand; 1866 - font-weight: 900; 1867 -} 1868 -#mainContentArea .hero-card-title { 1869 - margin-bottom: 16px; 1870 -} 1871 -#mainContentArea .hero-version-flow { 1872 - gap: 8px; 1873 -} 1874 -#mainContentArea .hero-version { 1875 - width: 62px; 1876 - height: 54px; 1877 - padding: 0 8px; 1878 - display: grid; 1879 - place-items: center; 1880 - box-sizing: border-box; 1881 - border-radius: 8px; 1882 - background: #F1F5F9; 1883 - color: #334155; 1884 - text-align: center; 1885 - font-size: 13px; 1886 - line-height: 1.25; 1887 -} 1888 -#mainContentArea .hero-version.active { 1889 - width: 84px; 1890 - background: @text; 1891 - color: #fff; 1892 -} 1893 -#mainContentArea .hero-arrow { 1894 - color: #64748B; 1895 -} 1896 -#mainContentArea .hero-flow { 1897 - position: absolute; 1898 - right: 48px; 1899 - bottom: 18px; 1900 - gap: 12px; 1901 -} 1902 -#mainContentArea .hero-env { 1903 - min-width: 130px; 1904 - padding: 16px 20px; 1905 - border: 1px solid @line; 1906 - border-radius: 12px; 1907 - background: #fff; 1908 - color: #475569; 1909 - text-align: center; 1910 - text-transform: uppercase; 1911 - font-size: 12px; 1912 - letter-spacing: 1.3px; 1913 - box-shadow: 0 16px 40px rgba(15, 23, 42, .08); 1914 -} 1915 -