Changes for page Public Web Site
Last modified by Agnease on 2026/07/07 14:40
Summary
-
Page properties (3 modified, 0 added, 0 removed)
-
Attachments (0 modified, 1 added, 0 removed)
-
Objects (1 modified, 0 added, 1 removed)
Details
- Page properties
-
- Default language
-
... ... @@ -1,1 +1,0 @@ 1 -en - Hidden
-
... ... @@ -1,1 +1,1 @@ 1 - false1 +true - Content
-
... ... @@ -2,7 +2,45 @@ 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> 5 5 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 +#* 6 6 <section class="hero hero-centered" aria-labelledby="hero-title"> 7 7 <div class="container hero-inner"> 8 8 <h1 id="hero-title">Professional XWiki consulting and engineering</h1> ... ... @@ -20,12 +20,13 @@ 20 20 </ul> 21 21 22 22 <div class="hero-actions"> 23 - <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Request a consultation</a> 61 + <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">Book a free discussion</a> 62 + ##<a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Request a consultation</a> 24 24 <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a> 25 25 </div> 26 26 </div> 27 27 </section> 28 - 67 +*# 29 29 <section class="trust-strip" aria-label="Agnease experience"> 30 30 <div class="container"> 31 31 <ul> ... ... @@ -110,6 +110,38 @@ 110 110 </div> 111 111 </section> 112 112 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> 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> 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> 179 + </div> 180 + </div> 181 + </section> 182 + </div> 183 + 113 113 <section class="split-section" aria-labelledby="why-title"> 114 114 <div class="container"> 115 115 <div class="split-grid"> ... ... @@ -117,10 +117,11 @@ 117 117 <h2 id="why-title">Why work with an XWiki specialist</h2> 118 118 <p> 119 119 XWiki projects often involve more than pages. Production platforms may include custom code, 120 - extensions, authentication, permissions, workflows, integrations and business-critical content. 191 + extensions, authentication, permissions, workflows, integrations, compliance documentation 192 + and business-critical knowledge. 121 121 </p> 122 122 <p> 123 - Agnease brings 11+ years of hands-on XWiki experience to help reduce risk, deliverpracticalimprovements195 + Agnease brings 11+ years of hands-on XWiki experience to help reduce risk, support long-term reliability 124 124 and leave the platform easier to maintain after the work is complete. 125 125 </p> 126 126 </div>
- agnease-xwiki-hero.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.Admin - Size
-
... ... @@ -1,0 +1,1 @@ 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,6 +11,19 @@ 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; 14 14 15 15 @section-padding: 30px 0; 16 16 @section-padding-mobile: 28px 0; ... ... @@ -137,7 +137,7 @@ 137 137 138 138 /* ========== Buttons ========== */ 139 139 140 -.btn-primary { 153 +/*.btn-primary { 141 141 background: @brand; 142 142 border-color: @brand; 143 143 color: #fff; ... ... @@ -149,18 +149,12 @@ 149 149 color: #fff; 150 150 } 151 151 } 152 - 165 +*/ 153 153 .btn-secondary { 154 - color: @ brand;167 + color: @text; 155 155 background: #fff; 156 - border: 1px solid fade(@ brand, 35%);169 + border: 1px solid fade(@text, 35%); 157 157 158 - &:hover, 159 - &:focus { 160 - color: @brand-strong; 161 - border-color: @brand; 162 - background: @brand-bg; 163 - } 164 164 } 165 165 166 166 /* ========== Hero ========== */ ... ... @@ -172,9 +172,6 @@ 172 172 173 173 &.hero-centered { 174 174 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%); 178 178 display: flex; 179 179 align-items: center; 180 180 justify-content: center; ... ... @@ -243,37 +243,63 @@ 243 243 margin-top: 22px; 244 244 } 245 245 246 -/* ========== TrustStrip========== */250 +/* ========== Contrast Band ========== */ 247 247 248 -.trust-strip { 249 - padding: 18px 0; 250 - border-top: 1px solid @line; 251 - background: #fff; 252 +/* Full‑bleed wrapper */ 253 +.contrast-band-wrapper { 254 + position: relative; 255 + overflow: visible; 256 +} 252 252 253 - ul { 254 - max-width: 960px; 255 - margin: 0 auto; 256 - padding: 0; 257 - list-style: none; 258 - display: flex; 259 - justify-content: center; 260 - gap: 22px; 261 - flex-wrap: wrap; 262 - color: @muted; 263 - font-size: 13px; 264 - } 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; 265 265 266 - li {267 - di splay:flex;268 - a lign-items:center;269 - ga p:7px;270 - }269 + background: 270 + radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%), 271 + radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%), 272 + linear-gradient(135deg, @text 0%, @text-soft 100%); 273 +} 271 271 272 - i { 273 - color: @brand; 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; 275 275 } 276 276 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 + 277 277 /* ========== Reusable Grids ========== */ 278 278 279 279 .card-grid, ... ... @@ -321,7 +321,6 @@ 321 321 .pathway-card, 322 322 .service-card, 323 323 .resource-card { 324 - background: #fff; 325 325 border: 1px solid @line; 326 326 border-radius: @radius; 327 327 box-shadow: @shadow-sm; ... ... @@ -443,7 +443,6 @@ 443 443 align-items: flex-start; 444 444 gap: 16px; 445 445 padding: 22px; 446 - background: #fff; 447 447 border: 1px solid @line; 448 448 border-radius: @radius; 449 449 box-shadow: @shadow-sm; ... ... @@ -531,7 +531,6 @@ 531 531 position: relative; 532 532 padding: 16px 16px 16px 58px; 533 533 margin-bottom: 12px; 534 - background: #fff; 535 535 border: 1px solid @line; 536 536 border-radius: @radius; 537 537 box-shadow: @shadow-sm; ... ... @@ -663,8 +663,8 @@ 663 663 664 664 /* ========== CTA ========== */ 665 665 666 -.cta-section { 667 - padding: @section-padding;693 +#mainContentArea .cta-section { 694 + padding: 44px 0 56px; 668 668 669 669 .contact-inline { 670 670 margin: 0; ... ... @@ -676,27 +676,70 @@ 676 676 } 677 677 } 678 678 679 -.cta-panel { 680 - max-width: 860px; 706 +#mainContentArea .cta-panel { 707 + position: relative; 708 + overflow: hidden; 709 + max-width: 1040px; 681 681 margin: 0 auto; 682 - padding: 32px;683 - border -radius:@radius;684 - border : 1px solid fade(@brand,20%);711 + padding: 48px 40px; 712 + border: 0; 713 + border-radius: 26px; 685 685 background: 686 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 687 - box-shadow: @shadow-sm; 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; 688 688 text-align: center; 720 +} 689 689 690 - h2 { 691 - margin-top: 0; 692 - } 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 +} 693 693 694 - p { 695 - color: @muted; 696 - line-height: 1.55; 697 - } 734 +#mainContentArea .cta-panel h2, 735 +#mainContentArea .cta-panel p, 736 +#mainContentArea .cta-panel .btn { 737 + position: relative; 738 + z-index: 1; 698 698 } 699 699 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 + 700 700 .resource-inline-cta { 701 701 display: flex; 702 702 align-items: center; ... ... @@ -727,19 +727,16 @@ 727 727 @media (max-width: 767px) { 728 728 .resource-inline-cta { 729 729 display: block; 800 + text-align: center; 730 730 731 731 p { 732 732 margin-bottom: 14px; 733 733 } 734 - } 735 -} 736 736 737 -@media (max-width: 767px) { 738 - .resource-inline-cta { 739 - display: block; 740 - 741 - p { 742 - margin-bottom: 14px; 806 + .btn { 807 + display: inline-block; 808 + margin-left: auto; 809 + margin-right: auto; 743 743 } 744 744 } 745 745 } ... ... @@ -831,9 +831,14 @@ 831 831 gap: 14px; 832 832 } 833 833 834 - .cta-panel { 835 - padding: 24px 20px; 901 + #mainContentArea .cta-panel { 902 + padding: 30px 22px; 903 + border-radius: 20px; 836 836 } 905 + 906 + #mainContentArea .cta-panel .btn-primary { 907 + width: 100%; 908 + } 837 837 } 838 838 839 839 /* ========== Resource / Article Pages ========== */ ... ... @@ -845,9 +845,6 @@ 845 845 .resource-header { 846 846 padding: @section-padding; 847 847 border-top: none; 848 - background: 849 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 850 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 851 851 852 852 h1 { 853 853 margin: 0 auto 14px; ... ... @@ -925,6 +925,45 @@ 925 925 } 926 926 } 927 927 997 +.resource-note.related-resources { 998 + p { 999 + margin-bottom: 10px; 1000 + } 1001 + 1002 + ul { 1003 + margin: 0; 1004 + padding-left: 20px; 1005 + } 1006 + 1007 + li { 1008 + margin: 6px 0; 1009 + color: @muted; 1010 + } 1011 +} 1012 + 1013 +.resource-faq-item { 1014 + display: flow-root; 1015 + border-bottom: 1px solid @line; 1016 + padding: 12px 0; 1017 + 1018 + summary { 1019 + cursor: pointer; 1020 + font-weight: 700; 1021 + color: @text; 1022 + line-height: 1.4; 1023 + } 1024 + 1025 + summary:hover, 1026 + summary:focus { 1027 + color: @brand-strong; 1028 + } 1029 + 1030 + p { 1031 + margin: 10px 0 4px; 1032 + color: @muted; 1033 + } 1034 +} 1035 + 928 928 .resource-checklist { 929 929 margin: 18px 0 24px; 930 930 padding: 0; ... ... @@ -956,7 +956,6 @@ 956 956 border: 1px solid @line; 957 957 border-radius: @radius; 958 958 padding: 18px; 959 - background: #fff; 960 960 box-shadow: @shadow-sm; 961 961 962 962 h4 { ... ... @@ -1046,30 +1046,39 @@ 1046 1046 } 1047 1047 1048 1048 .product-card-grid { 1049 - max-width: 8 40px;1050 - margin: 2 2px auto 0;1156 + max-width: 980px; 1157 + margin: 26px auto 0; 1051 1051 display: grid; 1052 1052 grid-template-columns: 1fr; 1053 - grid-gap: 18px;1160 + grid-gap: 22px; 1054 1054 } 1055 1055 1056 1056 .product-card { 1057 - background:#fff;1164 + position: relative; 1058 1058 border: 1px solid @line; 1059 1059 border-radius: @radius; 1060 1060 box-shadow: @shadow-sm; 1061 - padding: 2 8px;1168 + padding: 32px; 1062 1062 display: grid; 1063 - grid-template-columns: 68px 1fr;1064 - grid-gap: 2 2px;1170 + grid-template-columns: 70px 1fr; 1171 + grid-gap: 24px; 1065 1065 align-items: start; 1173 + overflow: hidden; 1066 1066 1175 + &:before { 1176 + content: ""; 1177 + position: absolute; 1178 + inset: 0 auto 0 0; 1179 + width: 5px; 1180 + background: linear-gradient(180deg, @brand 0%, @brand-strong 100%); 1181 + } 1182 + 1067 1067 .product-card-icon { 1068 1068 width: 58px; 1069 1069 height: 58px; 1070 1070 border-radius: 50%; 1071 1071 background: fade(@brand, 10%); 1072 - border: 1px solid fade(@brand, 2 0%);1188 + border: 1px solid fade(@brand, 22%); 1073 1073 color: @brand; 1074 1074 display: flex; 1075 1075 align-items: center; ... ... @@ -1078,11 +1078,15 @@ 1078 1078 flex-shrink: 0; 1079 1079 } 1080 1080 1197 + .product-card-body { 1198 + min-width: 0; 1199 + } 1200 + 1081 1081 h3 { 1082 1082 margin: 0 0 10px; 1083 1083 color: @text; 1084 - font-size: 2 3px;1085 - line-height: 1.2 5;1204 + font-size: 25px; 1205 + line-height: 1.22; 1086 1086 font-weight: 800; 1087 1087 } 1088 1088 ... ... @@ -1091,25 +1091,36 @@ 1091 1091 line-height: 1.6; 1092 1092 } 1093 1093 1094 - .card-link { 1095 - margin: 0; 1096 - 1097 - a { 1098 - font-weight: 700; 1099 - } 1214 + .product-card-description { 1215 + max-width: 760px; 1216 + margin: 0 0 14px; 1217 + font-size: 16px; 1100 1100 } 1101 1101 } 1102 1102 1103 1103 .product-card-kicker { 1222 + display: inline-flex; 1223 + align-items: center; 1224 + gap: 7px; 1225 + width: fit-content; 1104 1104 margin-bottom: 10px; 1105 1105 padding: 5px 10px; 1228 + border: 1px solid fade(@brand, 24%); 1229 + border-radius: 999px; 1230 + background: fade(@brand, 8%); 1231 + color: @brand-strong; 1106 1106 font-size: 12px; 1233 + font-weight: 800; 1107 1107 text-transform: uppercase; 1108 1108 letter-spacing: .04em; 1236 + 1237 + i { 1238 + color: @brand; 1239 + } 1109 1109 } 1110 1110 1111 1111 .product-highlights { 1112 - margin: 14px 0 2 0px;1243 + margin: 14px 0 22px; 1113 1113 padding-left: 18px; 1114 1114 color: @muted; 1115 1115 ... ... @@ -1119,12 +1119,58 @@ 1119 1119 } 1120 1120 } 1121 1121 1253 +.product-card-actions { 1254 + display: flex; 1255 + align-items: center; 1256 + gap: 16px; 1257 + flex-wrap: wrap; 1258 + 1259 + .btn { 1260 + font-weight: 700; 1261 + } 1262 +} 1263 + 1264 +.product-card-contact { 1265 + color: @brand; 1266 + font-weight: 700; 1267 + text-decoration: underline; 1268 + 1269 + &:hover, 1270 + &:focus { 1271 + color: @brand-strong; 1272 + } 1273 +} 1274 + 1275 +@media (max-width: 640px) { 1276 + .product-card { 1277 + grid-template-columns: 1fr; 1278 + padding: 26px 22px; 1279 + text-align: left; 1280 + 1281 + &:before { 1282 + width: 4px; 1283 + } 1284 + 1285 + .product-card-icon { 1286 + margin-bottom: 2px; 1287 + } 1288 + 1289 + h3 { 1290 + font-size: 22px; 1291 + } 1292 + } 1293 + 1294 + .product-card-actions { 1295 + gap: 12px; 1296 + } 1297 +} 1298 + 1122 1122 /* ========== Individual Product Pages ========== */ 1123 1123 1124 1124 .product-layout { 1125 1125 display: grid; 1126 - grid-template-columns: 1.1fr . 9fr;1127 - grid-gap: 3 6px;1303 + grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); 1304 + grid-gap: 32px; 1128 1128 max-width: 1040px; 1129 1129 margin: 0 auto; 1130 1130 align-items: start; ... ... @@ -1132,8 +1132,8 @@ 1132 1132 1133 1133 .product-summary-card, 1134 1134 .product-info-card, 1312 +.product-feature, 1135 1135 .product-gallery-panel { 1136 - background: #fff; 1137 1137 border: 1px solid @line; 1138 1138 border-radius: @radius; 1139 1139 box-shadow: @shadow-sm; ... ... @@ -1140,16 +1140,18 @@ 1140 1140 } 1141 1141 1142 1142 .product-summary-card { 1143 - padding: 2 6px;1320 + padding: 28px; 1144 1144 1145 1145 h2 { 1146 1146 text-align: left; 1147 1147 margin-top: 0; 1325 + margin-bottom: 14px; 1326 + line-height: 1.25; 1148 1148 } 1149 1149 1150 1150 p { 1151 1151 color: @muted; 1152 - line-height: 1.6; 1331 + line-height: 1.62; 1153 1153 } 1154 1154 1155 1155 p:last-child { ... ... @@ -1158,13 +1158,19 @@ 1158 1158 } 1159 1159 1160 1160 .product-info-card { 1161 - padding: 2 2px;1340 + padding: 24px; 1162 1162 1163 1163 h3 { 1164 1164 margin-top: 0; 1165 1165 margin-bottom: 12px; 1345 + line-height: 1.3; 1166 1166 } 1167 1167 1348 + p { 1349 + color: @muted; 1350 + line-height: 1.55; 1351 + } 1352 + 1168 1168 ul { 1169 1169 margin: 0; 1170 1170 padding-left: 20px; ... ... @@ -1173,25 +1173,30 @@ 1173 1173 1174 1174 li { 1175 1175 margin: 8px 0; 1176 - line-height: 1. 45;1361 + line-height: 1.3; 1177 1177 } 1178 1178 } 1179 1179 1365 +.product-card-note { 1366 + margin: 0 0 14px; 1367 + color: @muted; 1368 + line-height: 1.55; 1369 +} 1370 + 1180 1180 .product-feature-grid { 1181 1181 display: grid; 1182 1182 grid-template-columns: repeat(3, minmax(0, 1fr)); 1183 - grid-gap: 18px;1374 + grid-gap: 20px; 1184 1184 max-width: 1040px; 1185 - margin: 2 2px auto 0;1376 + margin: 24px auto 0; 1186 1186 } 1187 1187 1188 1188 .product-feature { 1189 - background: #fff; 1190 - border: 1px solid @line; 1191 - border-radius: @radius; 1192 - box-shadow: @shadow-sm; 1193 - padding: 22px; 1380 + padding: 24px; 1381 + min-width: 0; 1382 + min-height: 100%; 1194 1194 1384 + .card-heading, 1195 1195 .feature-heading { 1196 1196 display: flex; 1197 1197 align-items: center; ... ... @@ -1222,10 +1222,56 @@ 1222 1222 p { 1223 1223 margin: 0; 1224 1224 color: @muted; 1225 - line-height: 1.5; 1415 + line-height: 1.52; 1226 1226 } 1227 1227 } 1228 1228 1419 +.product-gallery-caption { 1420 + max-width: 820px; 1421 + margin: 12px auto 0; 1422 + color: @muted; 1423 + font-size: 14px; 1424 + line-height: 1.5; 1425 + text-align: center; 1426 +} 1427 + 1428 +/* Keep the default XWiki gallery style. 1429 + Only add spacing before it and center it. */ 1430 +.gallery.xGallery { 1431 + margin: 25px auto; 1432 + width: 920px; 1433 + height: 518px; 1434 +} 1435 + 1436 +.product-section-muted { 1437 + background: 1438 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1439 +} 1440 + 1441 +/* Compact process list when used inside a product card. */ 1442 +.product-summary-card .process-list { 1443 + margin-top: 16px; 1444 + 1445 + li { 1446 + padding: 13px 14px 13px 50px; 1447 + margin-bottom: 10px; 1448 + box-shadow: none; 1449 + } 1450 + 1451 + li:before { 1452 + left: 14px; 1453 + top: 14px; 1454 + width: 24px; 1455 + height: 24px; 1456 + font-size: 12px; 1457 + } 1458 + 1459 + strong { 1460 + margin-bottom: 2px; 1461 + } 1462 +} 1463 + 1464 +/* Kept for older product pages that still use a screenshot placeholder/panel. */ 1229 1229 .product-gallery-panel { 1230 1230 max-width: 1040px; 1231 1231 margin: 20px auto 0; ... ... @@ -1258,11 +1258,6 @@ 1258 1258 justify-content: center; 1259 1259 } 1260 1260 1261 -.product-section-muted { 1262 - background: 1263 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1264 -} 1265 - 1266 1266 @media (max-width: 980px) { 1267 1267 .product-layout, 1268 1268 .product-feature-grid { ... ... @@ -1291,12 +1291,37 @@ 1291 1291 .product-gallery-panel { 1292 1292 padding: 20px; 1293 1293 } 1525 + 1526 + .product-feature { 1527 + .card-heading, 1528 + .feature-heading { 1529 + gap: 12px; 1530 + } 1531 + 1532 + .feature-icon { 1533 + width: 42px; 1534 + height: 42px; 1535 + font-size: 16px; 1536 + } 1537 + } 1538 + 1539 + .gallery.xGallery { 1540 + margin-top: 22px !important; 1541 + } 1542 + 1543 + .product-gallery-caption { 1544 + margin-top: 10px; 1545 + padding: 0 14px; 1546 + } 1547 + 1548 + .product-summary-card .process-list li { 1549 + padding-left: 46px; 1550 + } 1294 1294 } 1295 1295 1296 1296 /* ========== Resources Index ========== */ 1297 1297 1298 1298 .resources-index-page { 1299 - background: #fff; 1300 1300 1301 1301 .services-grid { 1302 1302 grid-template-columns: repeat(2, minmax(0, 1fr)); ... ... @@ -1332,3 +1332,279 @@ 1332 1332 color: @muted; 1333 1333 } 1334 1334 } 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 +
- XWiki.XWikiRights[0]
-
- allow
-
... ... @@ -1,1 +1,0 @@ 1 -Allow - groups
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.XWikiAllGroup - levels
-
... ... @@ -1,1 +1,0 @@ 1 -view - users
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.XWikiGuest