Changes for page Public Web Site

Last modified by Alex Cotiuga on 2026/07/27 04:27

From version 31.2
edited by Alex Cotiuga
on 2026/07/27 04:11
Change comment: There is no comment for this version
To version 29.18
edited by Alex Cotiuga
on 2026/07/03 16:06
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -249,7 +249,6 @@
249 249   A short description is enough to define practical next steps.
250 250   </p>
251 251   <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Contact Agnease</a>
252 - <a class="btn btn-secondary" href="$xwiki.getURL('pricing.WebHome')">View service packages</a>
253 253   </div>
254 254   </div>
255 255   </section>
XWiki.StyleSheetExtension[0]
code
... ... @@ -79,7 +79,7 @@
79 79  
80 80  .section-intro {
81 81   max-width: 760px;
82 - margin: 10px auto 22px;
82 + margin: 0 auto 22px;
83 83   text-align: center;
84 84   color: @muted;
85 85   font-size: 16px;
... ... @@ -761,7 +761,6 @@
761 761  }
762 762  
763 763  .resource-card {
764 - background-color: #fff;
765 765   padding: 20px;
766 766  
767 767   h4 {
... ... @@ -956,86 +956,6 @@
956 956   }
957 957  }
958 958  
959 -/* ========== XWiki notifications inside public CTA panels ========== */
960 -
961 -#mainContentArea {
962 - .cta-panel {
963 - .reviewNotifications {
964 - position: relative;
965 - z-index: 1;
966 - max-width: 920px;
967 - margin: 22px auto 0;
968 - text-align: left;
969 -
970 - .box {
971 - margin: 0;
972 - padding: 18px 22px;
973 - border-radius: 8px;
974 -
975 - p {
976 - max-width: none;
977 - margin: 0;
978 - font-size: 15px;
979 - line-height: 1.55;
980 - font-weight: 600;
981 - }
982 - }
983 -
984 - .successmessage {
985 - border-color: #D6E9C6;
986 - border-left: 4px solid #3C763D;
987 - background: #DFF0D8;
988 - color: #3C763D;
989 -
990 - p,
991 - .fa,
992 - .icon {
993 - color: #3C763D;
994 - }
995 - }
996 -
997 - .errormessage {
998 - border-color: #EBCCD1;
999 - border-left: 4px solid #A94442;
1000 - background: #F2DEDE;
1001 - color: #A94442;
1002 -
1003 - p,
1004 - .fa,
1005 - .icon {
1006 - color: #A94442;
1007 - }
1008 - }
1009 -
1010 - .warningmessage {
1011 - border-color: #FAEBCC;
1012 - border-left: 4px solid #8A6D3B;
1013 - background: #FCF8E3;
1014 - color: #8A6D3B;
1015 -
1016 - p,
1017 - .fa,
1018 - .icon {
1019 - color: #8A6D3B;
1020 - }
1021 - }
1022 -
1023 - .infomessage {
1024 - border-color: #BCE8F1;
1025 - border-left: 4px solid #31708F;
1026 - background: #D9EDF7;
1027 - color: #31708F;
1028 -
1029 - p,
1030 - .fa,
1031 - .icon {
1032 - color: #31708F;
1033 - }
1034 - }
1035 - }
1036 - }
1037 -}
1038 -
1039 1039  @media (max-width: 760px) {
1040 1040   section[id] {
1041 1041   scroll-margin-top: 132px;
... ... @@ -1208,7 +1208,7 @@
1208 1208  
1209 1209  .resource-note {
1210 1210   border-left: 4px solid @brand;
1211 - background: #fff;
1130 + background: @brand-bg;
1212 1212   padding: 16px 18px;
1213 1213   margin: 22px 0;
1214 1214   border-radius: 0 @radius @radius 0;
... ... @@ -1310,53 +1310,33 @@
1310 1310   }
1311 1311  }
1312 1312  
1313 -.resource-cta {
1314 - display: flex;
1315 - flex-direction: column;
1316 - align-items: center;
1317 - text-align: center;
1318 -
1319 - max-width: 820px;
1320 - margin: 42px auto 0;
1321 - padding: 28px 30px;
1322 - border: 1px solid fade(@brand, 20%);
1323 - border-radius: @radius;
1324 - background: @brand-bg;
1325 -
1326 - h3 {
1327 - margin-top: 0;
1328 - margin-bottom: 10px;
1329 - }
1330 -
1331 - p {
1332 - max-width: 680px;
1333 - margin-left: auto;
1334 - margin-right: auto;
1335 - color: @muted;
1336 - }
1337 -
1338 - .btn {
1339 - margin-top: 8px;
1340 - }
1341 -}
1342 -
1343 1343  .resource-inline-cta {
1344 - display: flex;
1233 + position: relative;
1234 + display: grid;
1235 + grid-template-columns: minmax(0, 1fr) auto;
1345 1345   align-items: center;
1346 - justify-content: space-between;
1347 1347   gap: 22px;
1348 - margin: 30px 0;
1349 - padding: 20px 22px;
1350 - border: 1px solid @line;
1351 - border-left: 4px solid @brand;
1238 + margin: 32px 0;
1239 + padding: 22px 24px 22px 28px;
1240 + border: 1px solid fade(@brand, 20%);
1352 1352   border-radius: @radius;
1353 1353   background: #fff;
1354 1354   box-shadow: @shadow-sm;
1244 + overflow: hidden;
1355 1355  
1246 + &::before {
1247 + content: "";
1248 + position: absolute;
1249 + inset: 0 auto 0 0;
1250 + width: 5px;
1251 + background: linear-gradient(180deg, @brand 0%, @brand-strong 100%);
1252 + }
1253 +
1356 1356   p {
1357 1357   margin: 0;
1358 1358   color: @muted;
1359 - line-height: 1.55;
1257 + font-size: 15px;
1258 + line-height: 1.6;
1360 1360   }
1361 1361  
1362 1362   strong {
... ... @@ -1364,40 +1364,44 @@
1364 1364   margin-bottom: 4px;
1365 1365   color: @text;
1366 1366   font-size: 17px;
1367 - line-height: 1.3;
1266 + line-height: 1.35;
1368 1368   }
1369 1369  
1370 1370   .btn {
1371 - flex-shrink: 0;
1372 1372   white-space: nowrap;
1271 + align-self: center;
1373 1373   }
1273 +
1274 + .btn-secondary {
1275 + border-color: @text;
1276 + background: @text;
1277 + color: #fff;
1278 +
1279 + &:hover,
1280 + &:focus {
1281 + border-color: @brand-strong;
1282 + background: @brand-strong;
1283 + color: #fff;
1284 + text-decoration: none;
1285 + }
1286 + }
1374 1374  }
1375 1375  
1376 1376  .resource-note,
1377 1377  .resource-checklist,
1378 -.resource-cta,
1379 -.resource-inline-cta {
1380 1380   display: flow-root;
1381 1381  }
1382 1382  
1383 1383  @media (max-width: 767px) {
1384 - .resource-cta {
1385 - padding: 24px 20px;
1386 - }
1387 -}
1388 -
1389 -@media (max-width: 767px) {
1390 1390   .resource-inline-cta {
1391 - display: block;
1296 + grid-template-columns: 1fr;
1297 + gap: 16px;
1298 + padding: 22px 20px 22px 24px;
1299 + text-align: left;
1392 1392  
1393 - p {
1394 - margin-bottom: 14px;
1395 - }
1396 -
1397 1397   .btn {
1398 - display: block;
1399 1399   width: 100%;
1400 - white-space: normal;
1303 + justify-self: stretch;
1401 1401   }
1402 1402   }
1403 1403  }
... ... @@ -1535,6 +1535,17 @@
1535 1535   }
1536 1536  }
1537 1537  
1441 +.product-card-contact {
1442 + color: @brand;
1443 + font-weight: 700;
1444 + text-decoration: underline;
1445 +
1446 + &:hover,
1447 + &:focus {
1448 + color: @brand-strong;
1449 + }
1450 +}
1451 +
1538 1538  @media (max-width: 640px) {
1539 1539   .product-card {
1540 1540   grid-template-columns: 1fr;