Changes for page Public Web Site
Last modified by Agnease on 2026/07/01 17:17
Summary
-
Page properties (2 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
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -1,23 +1,17 @@ 1 1 /* ========== Agnease Public Website ========== */ 2 -/* Old look and feel. */ 3 3 4 4 @brand: #00937D; 5 5 @brand-strong: #007B6A; 6 6 @brand-soft: #E7FFF8; 6 +@brand-bg: #F4FCFA; 7 +@text: #2D3A34; 8 +@muted: #5B6B64; 9 +@line: #E4ECE9; 10 +@radius: 16px; 11 +@shadow-sm: 0 6px 20px rgba(0, 0, 0, .06); 12 +@shadow: 0 12px 36px rgba(0, 0, 0, .08); 13 +@maxw: 1140px; 7 7 8 - 9 -@brand-bg: #F7F9FC; 10 -@text: #07182D; 11 -@text-soft: #10243D; 12 -@muted: #64748B; 13 - 14 -@line: #E6EBF2; 15 -@radius: 18px; 16 - 17 -@shadow-sm: 0 18px 45px rgba(15, 23, 42, .06); 18 -@shadow: 0 30px 80px rgba(15, 23, 42, .12); 19 -@maxw: 1240px; 20 -/* */ 21 21 @section-padding: 30px 0; 22 22 @section-padding-mobile: 28px 0; 23 23 ... ... @@ -1002,45 +1002,6 @@ 1002 1002 } 1003 1003 } 1004 1004 1005 -.resource-note.related-resources { 1006 - p { 1007 - margin-bottom: 10px; 1008 - } 1009 - 1010 - ul { 1011 - margin: 0; 1012 - padding-left: 20px; 1013 - } 1014 - 1015 - li { 1016 - margin: 6px 0; 1017 - color: @muted; 1018 - } 1019 -} 1020 - 1021 -.resource-faq-item { 1022 - display: flow-root; 1023 - border-bottom: 1px solid @line; 1024 - padding: 12px 0; 1025 - 1026 - summary { 1027 - cursor: pointer; 1028 - font-weight: 700; 1029 - color: @text; 1030 - line-height: 1.4; 1031 - } 1032 - 1033 - summary:hover, 1034 - summary:focus { 1035 - color: @brand-strong; 1036 - } 1037 - 1038 - p { 1039 - margin: 10px 0 4px; 1040 - color: @muted; 1041 - } 1042 -} 1043 - 1044 1044 .resource-checklist { 1045 1045 margin: 18px 0 24px; 1046 1046 padding: 0; ... ... @@ -1162,40 +1162,30 @@ 1162 1162 } 1163 1163 1164 1164 .product-card-grid { 1165 - max-width: 980px;1166 - margin: 2 6px auto 0;1120 + max-width: 840px; 1121 + margin: 22px auto 0; 1167 1167 display: grid; 1168 1168 grid-template-columns: 1fr; 1169 - grid-gap: 22px;1124 + grid-gap: 18px; 1170 1170 } 1171 1171 1172 1172 .product-card { 1173 - position: relative; 1174 1174 background: #fff; 1175 1175 border: 1px solid @line; 1176 1176 border-radius: @radius; 1177 1177 box-shadow: @shadow-sm; 1178 - padding: 32px;1132 + padding: 28px; 1179 1179 display: grid; 1180 - grid-template-columns: 70px 1fr;1181 - grid-gap: 2 4px;1134 + grid-template-columns: 68px 1fr; 1135 + grid-gap: 22px; 1182 1182 align-items: start; 1183 - overflow: hidden; 1184 1184 1185 - &:before { 1186 - content: ""; 1187 - position: absolute; 1188 - inset: 0 auto 0 0; 1189 - width: 5px; 1190 - background: linear-gradient(180deg, @brand 0%, @brand-strong 100%); 1191 - } 1192 - 1193 1193 .product-card-icon { 1194 1194 width: 58px; 1195 1195 height: 58px; 1196 1196 border-radius: 50%; 1197 1197 background: fade(@brand, 10%); 1198 - border: 1px solid fade(@brand, 2 2%);1143 + border: 1px solid fade(@brand, 20%); 1199 1199 color: @brand; 1200 1200 display: flex; 1201 1201 align-items: center; ... ... @@ -1204,15 +1204,11 @@ 1204 1204 flex-shrink: 0; 1205 1205 } 1206 1206 1207 - .product-card-body { 1208 - min-width: 0; 1209 - } 1210 - 1211 1211 h3 { 1212 1212 margin: 0 0 10px; 1213 1213 color: @text; 1214 - font-size: 2 5px;1215 - line-height: 1.2 2;1155 + font-size: 23px; 1156 + line-height: 1.25; 1216 1216 font-weight: 800; 1217 1217 } 1218 1218 ... ... @@ -1221,36 +1221,25 @@ 1221 1221 line-height: 1.6; 1222 1222 } 1223 1223 1224 - .product-card-description { 1225 - max-width: 760px; 1226 - margin: 0 0 14px; 1227 - font-size: 16px; 1165 + .card-link { 1166 + margin: 0; 1167 + 1168 + a { 1169 + font-weight: 700; 1170 + } 1228 1228 } 1229 1229 } 1230 1230 1231 1231 .product-card-kicker { 1232 - display: inline-flex; 1233 - align-items: center; 1234 - gap: 7px; 1235 - width: fit-content; 1236 1236 margin-bottom: 10px; 1237 1237 padding: 5px 10px; 1238 - border: 1px solid fade(@brand, 24%); 1239 - border-radius: 999px; 1240 - background: fade(@brand, 8%); 1241 - color: @brand-strong; 1242 1242 font-size: 12px; 1243 - font-weight: 800; 1244 1244 text-transform: uppercase; 1245 1245 letter-spacing: .04em; 1246 - 1247 - i { 1248 - color: @brand; 1249 - } 1250 1250 } 1251 1251 1252 1252 .product-highlights { 1253 - margin: 14px 0 2 2px;1183 + margin: 14px 0 20px; 1254 1254 padding-left: 18px; 1255 1255 color: @muted; 1256 1256 ... ... @@ -1260,58 +1260,12 @@ 1260 1260 } 1261 1261 } 1262 1262 1263 -.product-card-actions { 1264 - display: flex; 1265 - align-items: center; 1266 - gap: 16px; 1267 - flex-wrap: wrap; 1268 - 1269 - .btn { 1270 - font-weight: 700; 1271 - } 1272 -} 1273 - 1274 -.product-card-contact { 1275 - color: @brand; 1276 - font-weight: 700; 1277 - text-decoration: underline; 1278 - 1279 - &:hover, 1280 - &:focus { 1281 - color: @brand-strong; 1282 - } 1283 -} 1284 - 1285 -@media (max-width: 640px) { 1286 - .product-card { 1287 - grid-template-columns: 1fr; 1288 - padding: 26px 22px; 1289 - text-align: left; 1290 - 1291 - &:before { 1292 - width: 4px; 1293 - } 1294 - 1295 - .product-card-icon { 1296 - margin-bottom: 2px; 1297 - } 1298 - 1299 - h3 { 1300 - font-size: 22px; 1301 - } 1302 - } 1303 - 1304 - .product-card-actions { 1305 - gap: 12px; 1306 - } 1307 -} 1308 - 1309 1309 /* ========== Individual Product Pages ========== */ 1310 1310 1311 1311 .product-layout { 1312 1312 display: grid; 1313 - grid-template-columns: minmax(0,1.12fr)minmax(280px,.88fr);1314 - grid-gap: 3 2px;1197 + grid-template-columns: 1.1fr .9fr; 1198 + grid-gap: 36px; 1315 1315 max-width: 1040px; 1316 1316 margin: 0 auto; 1317 1317 align-items: start; ... ... @@ -1328,18 +1328,16 @@ 1328 1328 } 1329 1329 1330 1330 .product-summary-card { 1331 - padding: 2 8px;1215 + padding: 26px; 1332 1332 1333 1333 h2 { 1334 1334 text-align: left; 1335 1335 margin-top: 0; 1336 - margin-bottom: 14px; 1337 - line-height: 1.25; 1338 1338 } 1339 1339 1340 1340 p { 1341 1341 color: @muted; 1342 - line-height: 1.6 2;1224 + line-height: 1.6; 1343 1343 } 1344 1344 1345 1345 p:last-child { ... ... @@ -1348,19 +1348,13 @@ 1348 1348 } 1349 1349 1350 1350 .product-info-card { 1351 - padding: 2 4px;1233 + padding: 22px; 1352 1352 1353 1353 h3 { 1354 1354 margin-top: 0; 1355 1355 margin-bottom: 12px; 1356 - line-height: 1.3; 1357 1357 } 1358 1358 1359 - p { 1360 - color: @muted; 1361 - line-height: 1.55; 1362 - } 1363 - 1364 1364 ul { 1365 1365 margin: 0; 1366 1366 padding-left: 20px; ... ... @@ -1369,31 +1369,28 @@ 1369 1369 1370 1370 li { 1371 1371 margin: 8px 0; 1372 - line-height: 1. 3;1248 + line-height: 1.45; 1373 1373 } 1374 1374 } 1375 1375 1376 1376 .product-card-note { 1377 - margin: 0 0 1 4px;1253 + margin: 0 0 12px; 1378 1378 color: @muted; 1379 - line-height: 1.5 5;1255 + line-height: 1.5; 1380 1380 } 1381 1381 1382 1382 .product-feature-grid { 1383 1383 display: grid; 1384 1384 grid-template-columns: repeat(3, minmax(0, 1fr)); 1385 - grid-gap: 20px;1261 + grid-gap: 18px; 1386 1386 max-width: 1040px; 1387 - margin: 2 4px auto 0;1263 + margin: 22px auto 0; 1388 1388 } 1389 1389 1390 1390 .product-feature { 1391 - padding: 24px; 1392 - min-width: 0; 1393 - min-height: 100%; 1267 + padding: 22px; 1394 1394 1395 - .card-heading, 1396 - .feature-heading { 1269 + .card-heading { 1397 1397 display: flex; 1398 1398 align-items: center; 1399 1399 gap: 14px; ... ... @@ -1423,13 +1423,13 @@ 1423 1423 p { 1424 1424 margin: 0; 1425 1425 color: @muted; 1426 - line-height: 1.5 2;1299 + line-height: 1.5; 1427 1427 } 1428 1428 } 1429 1429 1430 1430 .product-gallery-caption { 1431 - max-width: 8 20px;1432 - margin: 12px auto0;1304 + max-width: 860px; 1305 + margin: 28px auto 12px; 1433 1433 color: @muted; 1434 1434 font-size: 14px; 1435 1435 line-height: 1.5; ... ... @@ -1436,25 +1436,26 @@ 1436 1436 text-align: center; 1437 1437 } 1438 1438 1439 -/* Keep the default XWiki gallery style.1440 - Only add spacing beforeit andcenterit. */1312 +/* Keep the default XWiki gallery behavior. 1313 + Only center it and make its corners match the product cards. */ 1441 1441 .gallery.xGallery { 1442 - margin: 25px auto; 1443 - width: 920px; 1444 - height: 518px; 1315 + margin-left: auto !important; 1316 + margin-right: auto !important; 1317 + border-radius: @radius; 1318 + overflow: hidden; 1445 1445 } 1446 1446 1447 -.product-section-muted { 1448 - background: 1449 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1321 +.gallery.xGallery .galleria-container, 1322 +.gallery.xGallery .galleria-stage { 1323 + border-radius: @radius; 1324 + overflow: hidden; 1450 1450 } 1451 1451 1452 -/* Compact process list when used inside a product card. */ 1453 1453 .product-summary-card .process-list { 1454 1454 margin-top: 16px; 1455 1455 1456 1456 li { 1457 - padding: 1 3px 14px 13px 50px;1331 + padding: 12px 14px 12px 50px; 1458 1458 margin-bottom: 10px; 1459 1459 box-shadow: none; 1460 1460 } ... ... @@ -1461,7 +1461,7 @@ 1461 1461 1462 1462 li:before { 1463 1463 left: 14px; 1464 - top: 1 4px;1338 + top: 13px; 1465 1465 width: 24px; 1466 1466 height: 24px; 1467 1467 font-size: 12px; ... ... @@ -1472,7 +1472,11 @@ 1472 1472 } 1473 1473 } 1474 1474 1475 -/* Kept for older product pages that still use a screenshot placeholder/panel. */ 1349 +.product-section-muted { 1350 + background: 1351 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1352 +} 1353 + 1476 1476 .product-gallery-panel { 1477 1477 max-width: 1040px; 1478 1478 margin: 20px auto 0; ... ... @@ -1534,25 +1534,8 @@ 1534 1534 padding: 20px; 1535 1535 } 1536 1536 1537 - .product-feature { 1538 - .card-heading, 1539 - .feature-heading { 1540 - gap: 12px; 1541 - } 1542 - 1543 - .feature-icon { 1544 - width: 42px; 1545 - height: 42px; 1546 - font-size: 16px; 1547 - } 1548 - } 1549 - 1550 - .gallery.xGallery { 1551 - margin-top: 22px !important; 1552 - } 1553 - 1554 1554 .product-gallery-caption { 1555 - margin-top: 10px;1416 + margin-top: 22px; 1556 1556 padding: 0 14px; 1557 1557 } 1558 1558