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,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; ... ... @@ -756,6 +756,8 @@ 756 756 padding: 32px; 757 757 border-radius: @radius; 758 758 border: 1px solid fade(@brand, 20%); 759 + background: 760 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 759 759 box-shadow: @shadow-sm; 760 760 text-align: center; 761 761 ... ... @@ -914,6 +914,9 @@ 914 914 .resource-header { 915 915 padding: @section-padding; 916 916 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%); 917 917 918 918 h1 { 919 919 margin: 0 auto 14px; ... ... @@ -1061,6 +1061,7 @@ 1061 1061 border: 1px solid @line; 1062 1062 border-radius: @radius; 1063 1063 padding: 18px; 1069 + background: #fff; 1064 1064 box-shadow: @shadow-sm; 1065 1065 1066 1066 h4 { ... ... @@ -1150,39 +1150,30 @@ 1150 1150 } 1151 1151 1152 1152 .product-card-grid { 1153 - max-width: 980px;1154 - margin: 2 6px auto 0;1159 + max-width: 840px; 1160 + margin: 22px auto 0; 1155 1155 display: grid; 1156 1156 grid-template-columns: 1fr; 1157 - grid-gap: 22px;1163 + grid-gap: 18px; 1158 1158 } 1159 1159 1160 1160 .product-card { 1161 - position:relative;1167 + background: #fff; 1162 1162 border: 1px solid @line; 1163 1163 border-radius: @radius; 1164 1164 box-shadow: @shadow-sm; 1165 - padding: 32px;1171 + padding: 28px; 1166 1166 display: grid; 1167 - grid-template-columns: 70px 1fr;1168 - grid-gap: 2 4px;1173 + grid-template-columns: 68px 1fr; 1174 + grid-gap: 22px; 1169 1169 align-items: start; 1170 - overflow: hidden; 1171 1171 1172 - &:before { 1173 - content: ""; 1174 - position: absolute; 1175 - inset: 0 auto 0 0; 1176 - width: 5px; 1177 - background: linear-gradient(180deg, @brand 0%, @brand-strong 100%); 1178 - } 1179 - 1180 1180 .product-card-icon { 1181 1181 width: 58px; 1182 1182 height: 58px; 1183 1183 border-radius: 50%; 1184 1184 background: fade(@brand, 10%); 1185 - border: 1px solid fade(@brand, 2 2%);1182 + border: 1px solid fade(@brand, 20%); 1186 1186 color: @brand; 1187 1187 display: flex; 1188 1188 align-items: center; ... ... @@ -1191,15 +1191,11 @@ 1191 1191 flex-shrink: 0; 1192 1192 } 1193 1193 1194 - .product-card-body { 1195 - min-width: 0; 1196 - } 1197 - 1198 1198 h3 { 1199 1199 margin: 0 0 10px; 1200 1200 color: @text; 1201 - font-size: 2 5px;1202 - line-height: 1.2 2;1194 + font-size: 23px; 1195 + line-height: 1.25; 1203 1203 font-weight: 800; 1204 1204 } 1205 1205 ... ... @@ -1208,36 +1208,25 @@ 1208 1208 line-height: 1.6; 1209 1209 } 1210 1210 1211 - .product-card-description { 1212 - max-width: 760px; 1213 - margin: 0 0 14px; 1214 - font-size: 16px; 1204 + .card-link { 1205 + margin: 0; 1206 + 1207 + a { 1208 + font-weight: 700; 1209 + } 1215 1215 } 1216 1216 } 1217 1217 1218 1218 .product-card-kicker { 1219 - display: inline-flex; 1220 - align-items: center; 1221 - gap: 7px; 1222 - width: fit-content; 1223 1223 margin-bottom: 10px; 1224 1224 padding: 5px 10px; 1225 - border: 1px solid fade(@brand, 24%); 1226 - border-radius: 999px; 1227 - background: fade(@brand, 8%); 1228 - color: @brand-strong; 1229 1229 font-size: 12px; 1230 - font-weight: 800; 1231 1231 text-transform: uppercase; 1232 1232 letter-spacing: .04em; 1233 - 1234 - i { 1235 - color: @brand; 1236 - } 1237 1237 } 1238 1238 1239 1239 .product-highlights { 1240 - margin: 14px 0 2 2px;1222 + margin: 14px 0 20px; 1241 1241 padding-left: 18px; 1242 1242 color: @muted; 1243 1243 ... ... @@ -1247,52 +1247,6 @@ 1247 1247 } 1248 1248 } 1249 1249 1250 -.product-card-actions { 1251 - display: flex; 1252 - align-items: center; 1253 - gap: 16px; 1254 - flex-wrap: wrap; 1255 - 1256 - .btn { 1257 - font-weight: 700; 1258 - } 1259 -} 1260 - 1261 -.product-card-contact { 1262 - color: @brand; 1263 - font-weight: 700; 1264 - text-decoration: underline; 1265 - 1266 - &:hover, 1267 - &:focus { 1268 - color: @brand-strong; 1269 - } 1270 -} 1271 - 1272 -@media (max-width: 640px) { 1273 - .product-card { 1274 - grid-template-columns: 1fr; 1275 - padding: 26px 22px; 1276 - text-align: left; 1277 - 1278 - &:before { 1279 - width: 4px; 1280 - } 1281 - 1282 - .product-card-icon { 1283 - margin-bottom: 2px; 1284 - } 1285 - 1286 - h3 { 1287 - font-size: 22px; 1288 - } 1289 - } 1290 - 1291 - .product-card-actions { 1292 - gap: 12px; 1293 - } 1294 -} 1295 - 1296 1296 /* ========== Individual Product Pages ========== */ 1297 1297 1298 1298 .product-layout { ... ... @@ -1308,6 +1308,7 @@ 1308 1308 .product-info-card, 1309 1309 .product-feature, 1310 1310 .product-gallery-panel { 1247 + background: #fff; 1311 1311 border: 1px solid @line; 1312 1312 border-radius: @radius; 1313 1313 box-shadow: @shadow-sm; ... ... @@ -1355,7 +1355,7 @@ 1355 1355 1356 1356 li { 1357 1357 margin: 8px 0; 1358 - line-height: 1. 3;1295 + line-height: 1.45; 1359 1359 } 1360 1360 } 1361 1361 ... ... @@ -1425,9 +1425,9 @@ 1425 1425 /* Keep the default XWiki gallery style. 1426 1426 Only add spacing before it and center it. */ 1427 1427 .gallery.xGallery { 1428 - margin: 2 5pxauto;1429 - width:920px;1430 - height:518px;1365 + margin-top: 26px; 1366 + margin-left: auto; 1367 + margin-right: auto; 1431 1431 } 1432 1432 1433 1433 .product-section-muted { ... ... @@ -1550,6 +1550,7 @@ 1550 1550 /* ========== Resources Index ========== */ 1551 1551 1552 1552 .resources-index-page { 1490 + background: #fff; 1553 1553 1554 1554 .services-grid { 1555 1555 grid-template-columns: repeat(2, minmax(0, 1fr)); ... ... @@ -1585,332 +1585,3 @@ 1585 1585 color: @muted; 1586 1586 } 1587 1587 } 1588 - 1589 -/* ========== Global Theme Background ========== */ 1590 - 1591 -html, 1592 -body { 1593 - min-height: 100%; 1594 -} 1595 - 1596 -body { 1597 - color: @text; 1598 - background: 1599 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%), 1600 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%), 1601 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important; 1602 - background-attachment: fixed; 1603 -} 1604 - 1605 -/* Let the body background show through the XWiki wrappers. 1606 -#mainContentArea, 1607 -.resource-page, 1608 -.resources-index-page { 1609 - background: transparent !important; 1610 - background-image: none !important; 1611 -} 1612 -*/ 1613 -/* Remove local decorative backgrounds that compete with the global gradient. 1614 -.hero, 1615 -.hero.hero-centered, 1616 -.trust-strip, 1617 -.industry-trust-section, 1618 -.split-section, 1619 -.resource-strip, 1620 -.homepage-resource-strip, 1621 -.resource-header, 1622 -.product-section-muted, 1623 -.resources-index-page { 1624 - background: transparent !important; 1625 - background-image: none !important; 1626 -} 1627 - */ 1628 -/* Keep large panels readable, but remove their inner gradients. 1629 -.industry-trust-section .industry-trust-panel, 1630 -.cta-panel, 1631 -.resource-inline-cta, 1632 -.resource-note, 1633 -.resource-cta { 1634 - background: #fff !important; 1635 - background-image: none !important; 1636 -} */ 1637 - 1638 - 1639 -/* ========== Hero ========== */ 1640 -#mainContentArea .hero.hero-saas { 1641 - min-height: auto; 1642 - padding: 60px 0 34px; 1643 - display: flex; 1644 - align-items: center; 1645 - overflow: hidden; 1646 - background: transparent; 1647 -} 1648 -#mainContentArea .hero-layout { 1649 - max-width: 1120px; 1650 - margin: 0 auto; 1651 - display: grid; 1652 - grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); 1653 - gap: 56px; 1654 - align-items: center; 1655 -} 1656 -#mainContentArea .hero-copy, 1657 -#mainContentArea .hero.hero-saas .lead { 1658 - text-align: left; 1659 -} 1660 -#mainContentArea .hero.hero-saas h1 { 1661 - max-width: 640px; 1662 - margin: 0 0 26px; 1663 - font-size: 60px; 1664 - font-weight: 800; 1665 - line-height: 1; 1666 - letter-spacing: -3px; 1667 -} 1668 -#mainContentArea .hero.hero-saas h1 span { 1669 - color: @brand; 1670 -} 1671 -#mainContentArea .hero.hero-saas .lead { 1672 - max-width: 590px; 1673 - margin: 0 0 28px; 1674 - color: #334155; 1675 - font-size: 18px; 1676 - line-height: 1.6; 1677 -} 1678 -#mainContentArea .hero.hero-saas .benefits { 1679 - max-width: 620px; 1680 - margin: 0 0 30px; 1681 - padding: 0; 1682 - display: grid; 1683 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1684 - gap: 10px 24px; 1685 - list-style: none; 1686 - color: #475569; 1687 - font-size: 15px; 1688 - text-align: left; 1689 -} 1690 -#mainContentArea .hero.hero-saas .benefits li { 1691 - display: grid; 1692 - grid-template-columns: 18px minmax(0, 1fr); 1693 - column-gap: 8px; 1694 - align-items: start; 1695 - margin: 0; 1696 - line-height: 1.45; 1697 -} 1698 -#mainContentArea .hero.hero-saas .benefits li::before { 1699 - content: "✓"; 1700 - display: block; 1701 - width: 18px; 1702 - color: @brand; 1703 - font-weight: 900; 1704 - line-height: 1.45; 1705 - text-align: left; 1706 - margin: 0; 1707 -} 1708 -#mainContentArea .hero-actions, 1709 -#mainContentArea #hero-cta { 1710 - display: flex; 1711 - flex-wrap: wrap; 1712 - justify-content: flex-start; 1713 - gap: 12px; 1714 -} 1715 -#mainContentArea .hero-visual { 1716 - position: relative; 1717 - min-height: 540px; 1718 -} 1719 -#mainContentArea .hero-browser, 1720 -#mainContentArea .hero-floating { 1721 - border: 1px solid @line; 1722 - background: fade(#fff, 94%); 1723 - box-shadow: @shadow; 1724 - backdrop-filter: blur(14px); 1725 -} 1726 -#mainContentArea .hero-browser { 1727 - position: absolute; 1728 - top: 8px; 1729 - right: 0; 1730 - width: 100%; 1731 - max-width: 720px; 1732 - overflow: hidden; 1733 - border-radius: 18px; 1734 - background: fade(#fff, 88%); 1735 -} 1736 -#mainContentArea .hero-browser-top { 1737 - height: 58px; 1738 - display: flex; 1739 - align-items: center; 1740 - gap: 10px; 1741 - padding: 0 24px; 1742 - border-bottom: 1px solid @line; 1743 - background: fade(#fff, 74%); 1744 -} 1745 -#mainContentArea .hero-dot, 1746 -#mainContentArea .hero-status-dot { 1747 - border-radius: 50%; 1748 -} 1749 -#mainContentArea .hero-dot { 1750 - width: 10px; 1751 - height: 10px; 1752 - background: #CBD5E1; 1753 -} 1754 -#mainContentArea .hero-status-dot { 1755 - width: 8px; 1756 - height: 8px; 1757 - background: @brand; 1758 -} 1759 -#mainContentArea .hero-search { 1760 - margin-left: auto; 1761 - width: 170px; 1762 - height: 26px; 1763 - border: 1px solid #E2E8F0; 1764 - border-radius: 20px; 1765 - background: #F1F5F9; 1766 -} 1767 -#mainContentArea .hero-browser-body { 1768 - display: grid; 1769 - grid-template-columns: 150px minmax(0, 1fr); 1770 -} 1771 -#mainContentArea .hero-sidebar { 1772 - padding: 24px 18px; 1773 - border-right: 1px solid @line; 1774 - background: #F8FAFC; 1775 -} 1776 -#mainContentArea .hero-nav-item, 1777 -#mainContentArea .hero-status-row, 1778 -#mainContentArea .hero-version-flow, 1779 -#mainContentArea .hero-flow { 1780 - display: flex; 1781 - align-items: center; 1782 -} 1783 -#mainContentArea .hero-nav-item { 1784 - gap: 9px; 1785 - padding: 10px 8px; 1786 - color: #334155; 1787 - font-size: 13px; 1788 -} 1789 -#mainContentArea .hero-nav-icon { 1790 - width: 20px; 1791 - height: 20px; 1792 - border: 1px solid #CBD5E1; 1793 - border-radius: 5px; 1794 -} 1795 -#mainContentArea .hero-content-panel { 1796 - padding: 26px; 1797 -} 1798 -#mainContentArea .hero-panel-title, 1799 -#mainContentArea .hero-card-title { 1800 - color: @text; 1801 - font-weight: 800; 1802 -} 1803 -#mainContentArea .hero-panel-title { 1804 - margin-bottom: 18px; 1805 - font-size: 20px; 1806 -} 1807 -#mainContentArea .hero-skeleton { 1808 - height: 8px; 1809 - margin-bottom: 10px; 1810 - border-radius: 10px; 1811 - background: #E2E8F0; 1812 -} 1813 -#mainContentArea .hero-skeleton.short { 1814 - width: 64%; 1815 -} 1816 -#mainContentArea .hero-dashboard-grid { 1817 - margin-top: 28px; 1818 - display: grid; 1819 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1820 - gap: 18px; 1821 -} 1822 -#mainContentArea .hero-mini-card { 1823 - padding: 18px; 1824 - border: 1px solid @line; 1825 - border-radius: 14px; 1826 - background: #fff; 1827 -} 1828 -#mainContentArea .hero-mini-card h4 { 1829 - margin: 0 0 14px; 1830 - font-size: 15px; 1831 -} 1832 -#mainContentArea .hero-status-row { 1833 - gap: 10px; 1834 - margin: 11px 0; 1835 - color: #475569; 1836 - font-size: 13px; 1837 -} 1838 -#mainContentArea .hero-floating { 1839 - position: absolute; 1840 - border-radius: 16px; 1841 -} 1842 -#mainContentArea .hero-upgrade-card { 1843 - left: 0; 1844 - bottom: 72px; 1845 - width: 320px; 1846 - padding: 20px; 1847 -} 1848 -#mainContentArea .hero-security-card { 1849 - right: 20px; 1850 - top: 260px; 1851 - width: 260px; 1852 - padding: 22px; 1853 -} 1854 -#mainContentArea .hero-security-card ul { 1855 - margin: 0; 1856 - padding: 0; 1857 - list-style: none; 1858 -} 1859 -#mainContentArea .hero-security-card li { 1860 - margin: 12px 0; 1861 - font-size: 14px; 1862 -} 1863 -#mainContentArea .hero-security-card li::before { 1864 - content: "✓"; 1865 - margin-right: 8px; 1866 - color: @brand; 1867 - font-weight: 900; 1868 -} 1869 -#mainContentArea .hero-card-title { 1870 - margin-bottom: 16px; 1871 -} 1872 -#mainContentArea .hero-version-flow { 1873 - gap: 8px; 1874 -} 1875 -#mainContentArea .hero-version { 1876 - width: 62px; 1877 - height: 54px; 1878 - padding: 0 8px; 1879 - display: grid; 1880 - place-items: center; 1881 - box-sizing: border-box; 1882 - border-radius: 8px; 1883 - background: #F1F5F9; 1884 - color: #334155; 1885 - text-align: center; 1886 - font-size: 13px; 1887 - line-height: 1.25; 1888 -} 1889 -#mainContentArea .hero-version.active { 1890 - width: 84px; 1891 - background: @text; 1892 - color: #fff; 1893 -} 1894 -#mainContentArea .hero-arrow { 1895 - color: #64748B; 1896 -} 1897 -#mainContentArea .hero-flow { 1898 - position: absolute; 1899 - right: 48px; 1900 - bottom: 18px; 1901 - gap: 12px; 1902 -} 1903 -#mainContentArea .hero-env { 1904 - min-width: 130px; 1905 - padding: 16px 20px; 1906 - border: 1px solid @line; 1907 - border-radius: 12px; 1908 - background: #fff; 1909 - color: #475569; 1910 - text-align: center; 1911 - text-transform: uppercase; 1912 - font-size: 12px; 1913 - letter-spacing: 1.3px; 1914 - box-shadow: 0 16px 40px rgba(15, 23, 42, .08); 1915 -} 1916 -