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