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