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