Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Objects (2 modified, 0 added, 1 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -599,6 +599,32 @@ 599 599 } 600 600 } 601 601 602 +.resource-content { 603 + order: 1; 604 +} 605 + 606 +.resource-sidebar { 607 + order: 2; 608 +} 609 + 610 +@media (max-width: 767px) { 611 + .resource-layout { 612 + display: flex; 613 + flex-direction: column; 614 + } 615 + 616 + .resource-sidebar { 617 + order: 0; 618 + position: static; 619 + width: 100%; 620 + margin-bottom: 24px; 621 + } 622 + 623 + .resource-content { 624 + order: 1; 625 + } 626 +} 627 + 602 602 /* ========== CTA ========== */ 603 603 604 604 .cta-section { ... ... @@ -726,3 +726,563 @@ 726 726 padding: 24px 20px; 727 727 } 728 728 } 755 +/* ========== Resource / Article Pages ========== */ 756 + 757 +.resource-page { 758 + padding-top: 34px; 759 +} 760 + 761 +.resource-header { 762 + padding: 40px 0 30px; 763 + border-top: none; 764 + background: 765 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 766 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 767 + 768 + h1 { 769 + margin: 0 auto 14px; 770 + text-align: center; 771 + line-height: 1.18; 772 + } 773 + 774 + .resource-summary { 775 + max-width: 780px; 776 + margin: 0 auto; 777 + color: @muted; 778 + text-align: center; 779 + font-size: 18px; 780 + line-height: 1.55; 781 + } 782 +} 783 + 784 +.resource-layout { 785 + display: grid; 786 + grid-template-columns: minmax(0, 760px) 280px; 787 + gap: 42px; 788 + max-width: 1080px; 789 + margin: 0 auto; 790 + align-items: start; 791 +} 792 + 793 +.resource-content { 794 + color: @text; 795 + font-size: 16px; 796 + line-height: 1.68; 797 + 798 + h2 { 799 + text-align: left; 800 + margin: 34px 0 12px; 801 + line-height: 1.28; 802 + } 803 + 804 + h3 { 805 + margin: 24px 0 8px; 806 + line-height: 1.3; 807 + } 808 + 809 + p { 810 + margin: 0 0 16px; 811 + } 812 + 813 + ul, 814 + ol { 815 + margin: 0 0 18px; 816 + padding-left: 22px; 817 + } 818 + 819 + li { 820 + margin: 6px 0; 821 + } 822 + 823 + strong { 824 + color: @text; 825 + } 826 +} 827 + 828 +.resource-note { 829 + border-left: 4px solid @brand; 830 + background: @brand-bg; 831 + padding: 16px 18px; 832 + margin: 22px 0; 833 + border-radius: 0 @radius @radius 0; 834 + 835 + p:last-child { 836 + margin-bottom: 0; 837 + } 838 +} 839 + 840 +.resource-checklist { 841 + margin: 18px 0 24px; 842 + padding: 0; 843 + list-style: none; 844 + 845 + li { 846 + position: relative; 847 + padding: 10px 0 10px 34px; 848 + border-bottom: 1px solid @line; 849 + 850 + &:before { 851 + content: "\f00c"; 852 + font-family: FontAwesome; 853 + position: absolute; 854 + left: 0; 855 + top: 11px; 856 + color: @brand; 857 + } 858 + } 859 +} 860 + 861 +.resource-sidebar { 862 + position: sticky; 863 + top: 96px; 864 + border: 1px solid @line; 865 + border-radius: @radius; 866 + padding: 18px; 867 + background: #fff; 868 + box-shadow: @shadow-sm; 869 + 870 + h4 { 871 + margin: 0 0 10px; 872 + } 873 + 874 + ul { 875 + margin: 0; 876 + padding-left: 18px; 877 + color: @muted; 878 + } 879 + 880 + li { 881 + margin: 8px 0; 882 + } 883 + 884 + a { 885 + color: @brand; 886 + font-weight: 600; 887 + } 888 +} 889 + 890 +.resource-cta { 891 + margin-top: 36px; 892 + padding: 22px; 893 + border: 1px solid fade(@brand, 20%); 894 + border-radius: @radius; 895 + background: @brand-bg; 896 + 897 + h3 { 898 + margin-top: 0; 899 + } 900 + 901 + p { 902 + color: @muted; 903 + } 904 +} 905 + 906 +@media (max-width: 900px) { 907 + .resource-layout { 908 + grid-template-columns: 1fr; 909 + } 910 + 911 + .resource-sidebar { 912 + position: static; 913 + } 914 +} 915 +/* ========== Products / Extensions Pages ========== */ 916 + 917 +.product-index-section { 918 + padding: 52px 0 56px; 919 + 920 + h2 { 921 + margin-bottom: 10px; 922 + } 923 +} 924 + 925 +.product-card-grid { 926 + max-width: 840px; 927 + margin: 28px auto 0; 928 + display: grid; 929 + grid-template-columns: 1fr; 930 + grid-gap: 18px; 931 +} 932 + 933 +.product-card { 934 + background: #fff; 935 + border: 1px solid @line; 936 + border-radius: @radius; 937 + box-shadow: @shadow-sm; 938 + padding: 28px; 939 + display: grid; 940 + grid-template-columns: 68px 1fr; 941 + grid-gap: 22px; 942 + align-items: start; 943 + transition: transform .18s ease, box-shadow .18s ease; 944 + 945 + &:hover { 946 + transform: translateY(-2px); 947 + box-shadow: @shadow; 948 + } 949 + 950 + .product-card-icon { 951 + width: 58px; 952 + height: 58px; 953 + border-radius: 50%; 954 + background: fade(@brand, 10%); 955 + border: 1px solid fade(@brand, 20%); 956 + color: @brand; 957 + display: flex; 958 + align-items: center; 959 + justify-content: center; 960 + font-size: 22px; 961 + flex-shrink: 0; 962 + } 963 + 964 + h3 { 965 + margin: 0 0 10px; 966 + color: @text; 967 + font-size: 23px; 968 + line-height: 1.25; 969 + font-weight: 800; 970 + } 971 + 972 + p { 973 + color: @muted; 974 + line-height: 1.6; 975 + } 976 + 977 + .card-link { 978 + margin: 0; 979 + 980 + a { 981 + font-weight: 700; 982 + } 983 + } 984 +} 985 + 986 +.product-card-kicker { 987 + margin-bottom: 10px; 988 + padding: 5px 10px; 989 + font-size: 12px; 990 + text-transform: uppercase; 991 + letter-spacing: .04em; 992 +} 993 + 994 +.product-highlights { 995 + margin: 14px 0 20px; 996 + padding-left: 18px; 997 + color: @muted; 998 + 999 + li { 1000 + margin: 6px 0; 1001 + line-height: 1.45; 1002 + } 1003 +} 1004 + 1005 +/* ========== Individual Product Pages ========== */ 1006 + 1007 +.product-layout { 1008 + display: grid; 1009 + grid-template-columns: 1.1fr .9fr; 1010 + grid-gap: 36px; 1011 + max-width: 1040px; 1012 + margin: 0 auto; 1013 + align-items: start; 1014 +} 1015 + 1016 +.product-summary-card, 1017 +.product-info-card, 1018 +.product-gallery-panel { 1019 + background: #fff; 1020 + border: 1px solid @line; 1021 + border-radius: @radius; 1022 + box-shadow: @shadow-sm; 1023 +} 1024 + 1025 +.product-summary-card { 1026 + padding: 26px; 1027 + 1028 + h2 { 1029 + text-align: left; 1030 + margin-top: 0; 1031 + } 1032 + 1033 + p { 1034 + color: @muted; 1035 + line-height: 1.6; 1036 + } 1037 + 1038 + p:last-child { 1039 + margin-bottom: 0; 1040 + } 1041 +} 1042 + 1043 +.product-info-card { 1044 + padding: 22px; 1045 + 1046 + h3 { 1047 + margin-top: 0; 1048 + margin-bottom: 12px; 1049 + } 1050 + 1051 + ul { 1052 + margin: 0; 1053 + padding-left: 20px; 1054 + color: @muted; 1055 + } 1056 + 1057 + li { 1058 + margin: 8px 0; 1059 + line-height: 1.45; 1060 + } 1061 +} 1062 + 1063 +.product-feature-grid { 1064 + display: grid; 1065 + grid-template-columns: repeat(3, minmax(0, 1fr)); 1066 + grid-gap: 18px; 1067 + max-width: 1040px; 1068 + margin: 26px auto 0; 1069 +} 1070 + 1071 +.product-feature { 1072 + background: #fff; 1073 + border: 1px solid @line; 1074 + border-radius: @radius; 1075 + box-shadow: @shadow-sm; 1076 + padding: 22px; 1077 + transition: transform .18s ease, box-shadow .18s ease; 1078 + 1079 + &:hover { 1080 + transform: translateY(-2px); 1081 + box-shadow: @shadow; 1082 + } 1083 + 1084 + .feature-icon { 1085 + width: 46px; 1086 + height: 46px; 1087 + border-radius: 50%; 1088 + background: fade(@brand, 10%); 1089 + color: @brand; 1090 + display: flex; 1091 + align-items: center; 1092 + justify-content: center; 1093 + margin-bottom: 14px; 1094 + font-size: 18px; 1095 + } 1096 + 1097 + h3 { 1098 + margin: 0 0 8px; 1099 + color: @text; 1100 + font-size: 18px; 1101 + line-height: 1.25; 1102 + } 1103 + 1104 + p { 1105 + margin: 0; 1106 + color: @muted; 1107 + line-height: 1.5; 1108 + } 1109 +} 1110 + 1111 +.product-gallery-panel { 1112 + max-width: 1040px; 1113 + margin: 20px auto 0; 1114 + padding: 26px; 1115 + 1116 + h2 { 1117 + margin-top: 0; 1118 + text-align: center; 1119 + } 1120 + 1121 + .gallery-note { 1122 + max-width: 700px; 1123 + margin: 0 auto 18px; 1124 + color: @muted; 1125 + text-align: center; 1126 + line-height: 1.55; 1127 + } 1128 +} 1129 + 1130 +.product-gallery-placeholder { 1131 + min-height: 260px; 1132 + padding: 28px; 1133 + border: 1px dashed fade(@brand, 40%); 1134 + border-radius: @radius; 1135 + background: fade(@brand, 5%); 1136 + color: @muted; 1137 + text-align: center; 1138 + display: flex; 1139 + align-items: center; 1140 + justify-content: center; 1141 +} 1142 + 1143 +.product-section-muted { 1144 + background: 1145 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1146 +} 1147 + 1148 +@media (max-width: 980px) { 1149 + .product-layout, 1150 + .product-feature-grid { 1151 + grid-template-columns: 1fr; 1152 + } 1153 + 1154 + .product-summary-card h2 { 1155 + text-align: center; 1156 + } 1157 +} 1158 + 1159 +@media (max-width: 640px) { 1160 + .product-card { 1161 + grid-template-columns: 1fr; 1162 + padding: 22px; 1163 + text-align: left; 1164 + 1165 + .product-card-icon { 1166 + margin-bottom: 2px; 1167 + } 1168 + } 1169 + 1170 + .product-summary-card, 1171 + .product-info-card, 1172 + .product-feature, 1173 + .product-gallery-panel { 1174 + padding: 20px; 1175 + } 1176 +} 1177 +/* ========== Resources Index ========== */ 1178 + 1179 +.resources-index-page { 1180 + padding: 56px 0 72px; 1181 + background: @brand-bg; 1182 +} 1183 + 1184 +.resources-intro { 1185 + max-width: 820px; 1186 + margin: 0 auto 32px; 1187 + text-align: center; 1188 +} 1189 + 1190 +.resources-intro p { 1191 + color: @muted; 1192 + font-size: 17px; 1193 + line-height: 1.7; 1194 + margin: 0; 1195 +} 1196 + 1197 +.resources-grid { 1198 + display: grid; 1199 + grid-template-columns: repeat(2, minmax(0, 1fr)); 1200 + gap: 24px; 1201 + margin-bottom: 36px; 1202 +} 1203 + 1204 +.resource-card { 1205 + display: flex; 1206 + gap: 18px; 1207 + background: #fff; 1208 + border: 1px solid @line; 1209 + border-radius: @radius; 1210 + box-shadow: @shadow-sm; 1211 + padding: 24px; 1212 +} 1213 + 1214 +.resource-card-icon { 1215 + flex: 0 0 46px; 1216 + width: 46px; 1217 + height: 46px; 1218 + border-radius: 14px; 1219 + background: @brand-soft; 1220 + color: @brand-strong; 1221 + display: flex; 1222 + align-items: center; 1223 + justify-content: center; 1224 + font-size: 20px; 1225 +} 1226 + 1227 +.resource-card-label { 1228 + color: @brand-strong; 1229 + font-size: 13px; 1230 + font-weight: 700; 1231 + text-transform: uppercase; 1232 + letter-spacing: .04em; 1233 + margin-bottom: 8px; 1234 +} 1235 + 1236 +.resource-card h2 { 1237 + font-size: 22px; 1238 + line-height: 1.25; 1239 + margin: 0 0 12px; 1240 +} 1241 + 1242 +.resource-card h2 a { 1243 + color: @text; 1244 + text-decoration: none; 1245 +} 1246 + 1247 +.resource-card h2 a:hover { 1248 + color: @brand-strong; 1249 + text-decoration: none; 1250 +} 1251 + 1252 +.resource-card p { 1253 + color: @muted; 1254 + font-size: 15px; 1255 + line-height: 1.65; 1256 + margin: 0 0 16px; 1257 +} 1258 + 1259 +.resource-card-link { 1260 + color: @brand-strong; 1261 + font-weight: 700; 1262 + text-decoration: none; 1263 +} 1264 + 1265 +.resource-card-link:hover { 1266 + color: @brand; 1267 + text-decoration: none; 1268 +} 1269 + 1270 +.resources-next { 1271 + max-width: 820px; 1272 + margin: 0 auto 32px; 1273 + text-align: center; 1274 +} 1275 + 1276 +.resources-next h2 { 1277 + font-size: 26px; 1278 + margin: 0 0 10px; 1279 +} 1280 + 1281 +.resources-next p { 1282 + color: @muted; 1283 + font-size: 16px; 1284 + line-height: 1.7; 1285 + margin: 0; 1286 +} 1287 + 1288 +@media (max-width: 767px) { 1289 + .resources-index-page { 1290 + padding: 36px 0 52px; 1291 + } 1292 + 1293 + .resources-intro { 1294 + text-align: left; 1295 + margin-bottom: 24px; 1296 + } 1297 + 1298 + .resources-grid { 1299 + grid-template-columns: 1fr; 1300 + gap: 18px; 1301 + } 1302 + 1303 + .resource-card { 1304 + padding: 20px; 1305 + } 1306 + 1307 + .resource-card h2 { 1308 + font-size: 20px; 1309 + } 1310 + 1311 + .resources-next { 1312 + text-align: left; 1313 + } 1314 +}
- XWiki.StyleSheetExtension[1]
-
- code
-
... ... @@ -7,25 +7,54 @@ 7 7 @line: #E4ECE9; 8 8 @brand-bg: #F4FCFA; 9 9 10 -.agnease-services-menu { 10 +/* Top-level menu items */ 11 + 12 +.agnease-services-menu, 13 +.agnease-products-menu { 11 11 .dropdown-toggle { 12 12 font-weight: inherit; 13 13 font-size: inherit; 14 14 } 15 15 19 + .caret { 20 + margin-left: 4px; 21 + } 22 + 16 16 &.open > .dropdown-toggle, 17 17 .dropdown-toggle:hover, 18 18 .dropdown-toggle:focus { 19 - color: @brand; 26 + color: @brand-strong; 20 20 background: transparent; 28 + background-color: transparent; 29 + box-shadow: none; 21 21 } 31 +} 22 22 23 - .caret { 24 - margin-left: 4px; 25 - } 33 +/* Keep Agnease public top-level menu visually clean when hovered/open/focused */ 34 + 35 +.navbar-nav > li.agnease-services-menu > a, 36 +.navbar-nav > li.agnease-products-menu > a, 37 +.navbar-nav > li.agnease-services-menu > a:hover, 38 +.navbar-nav > li.agnease-products-menu > a:hover, 39 +.navbar-nav > li.agnease-services-menu > a:focus, 40 +.navbar-nav > li.agnease-products-menu > a:focus, 41 +.navbar-nav > li.agnease-services-menu.open > a, 42 +.navbar-nav > li.agnease-products-menu.open > a, 43 +.navbar-nav > li.agnease-services-menu.open > a:hover, 44 +.navbar-nav > li.agnease-products-menu.open > a:hover, 45 +.navbar-nav > li.agnease-services-menu.open > a:focus, 46 +.navbar-nav > li.agnease-products-menu.open > a:focus { 47 + background: transparent; 48 + background-color: transparent; 49 + color: @brand-strong; 50 + box-shadow: none; 26 26 } 27 27 28 -.agnease-services-dropdown { 53 +/* Dropdown panels */ 54 + 55 +.agnease-services-dropdown, 56 +.agnease-resources-dropdown, 57 +.agnease-products-dropdown { 29 29 min-width: 360px; 30 30 padding: 10px; 31 31 border: 1px solid @line; ... ... @@ -102,12 +102,23 @@ 102 102 } 103 103 } 104 104 134 +/* Products dropdown can be slightly narrower for now */ 135 + 136 +.agnease-products-dropdown { 137 + min-width: 340px; 138 +} 139 + 140 +/* Mobile */ 141 + 105 105 @media (max-width: 767px) { 106 - .agnease-services-dropdown { 143 + .agnease-services-dropdown, 144 + .agnease-products-dropdown { 107 107 min-width: 0; 108 108 width: 100%; 109 109 padding: 6px; 110 110 border-radius: 0; 149 + border-left: 0; 150 + border-right: 0; 111 111 box-shadow: none; 112 112 113 113 > li > a { ... ... @@ -115,15 +115,3 @@ 115 115 } 116 116 } 117 117 } 118 -/* Keep the top-level Services menu visually clean when hovered/open/focused */ 119 -.navbar-nav > li.agnease-services-menu > a, 120 -.navbar-nav > li.agnease-services-menu > a:hover, 121 -.navbar-nav > li.agnease-services-menu > a:focus, 122 -.navbar-nav > li.agnease-services-menu.open > a, 123 -.navbar-nav > li.agnease-services-menu.open > a:hover, 124 -.navbar-nav > li.agnease-services-menu.open > a:focus { 125 - background: transparent; 126 - background-color: transparent; 127 - color: @brand-strong; 128 - box-shadow: none; 129 -}
- XWiki.StyleSheetExtension[2]
-
- cache
-
... ... @@ -1,1 +1,0 @@ 1 -long - code
-
... ... @@ -1,174 +1,0 @@ 1 -/* ========== Resource / Article Pages ========== */ 2 - 3 -.resource-page { 4 - padding-top: 34px; 5 -} 6 - 7 -.resource-header { 8 - padding: 40px 0 30px; 9 - border-top: none; 10 - background: 11 - radial-gradient(42rem 14rem at 50% 0%, @brand-bg 0%, transparent 70%); 12 - 13 - .resource-kicker { 14 - display: inline-flex; 15 - align-items: center; 16 - gap: 8px; 17 - color: @brand; 18 - background: fade(@brand, 8%); 19 - border: 1px solid fade(@brand, 18%); 20 - border-radius: 999px; 21 - padding: 6px 12px; 22 - margin-bottom: 14px; 23 - font-size: 13px; 24 - font-weight: 700; 25 - } 26 - 27 - h1 { 28 - max-width: 820px; 29 - margin: 0 auto 14px; 30 - text-align: center; 31 - line-height: 1.18; 32 - } 33 - 34 - .resource-summary { 35 - max-width: 780px; 36 - margin: 0 auto; 37 - color: @muted; 38 - text-align: center; 39 - font-size: 18px; 40 - line-height: 1.55; 41 - } 42 -} 43 - 44 -.resource-layout { 45 - display: grid; 46 - grid-template-columns: minmax(0, 760px) 280px; 47 - gap: 42px; 48 - max-width: 1080px; 49 - margin: 0 auto; 50 - align-items: start; 51 -} 52 - 53 -.resource-content { 54 - color: @text; 55 - font-size: 16px; 56 - line-height: 1.68; 57 - 58 - h2 { 59 - text-align: left; 60 - margin: 34px 0 12px; 61 - line-height: 1.28; 62 - } 63 - 64 - h3 { 65 - margin: 24px 0 8px; 66 - line-height: 1.3; 67 - } 68 - 69 - p { 70 - margin: 0 0 16px; 71 - } 72 - 73 - ul, 74 - ol { 75 - margin: 0 0 18px; 76 - padding-left: 22px; 77 - } 78 - 79 - li { 80 - margin: 6px 0; 81 - } 82 - 83 - strong { 84 - color: @text; 85 - } 86 -} 87 - 88 -.resource-note { 89 - border-left: 4px solid @brand; 90 - background: @brand-bg; 91 - padding: 16px 18px; 92 - margin: 22px 0; 93 - border-radius: 0 @radius @radius 0; 94 - 95 - p:last-child { 96 - margin-bottom: 0; 97 - } 98 -} 99 - 100 -.resource-checklist { 101 - margin: 18px 0 24px; 102 - padding: 0; 103 - list-style: none; 104 - 105 - li { 106 - position: relative; 107 - padding: 10px 0 10px 34px; 108 - border-bottom: 1px solid @line; 109 - 110 - &:before { 111 - content: "\f00c"; 112 - font-family: FontAwesome; 113 - position: absolute; 114 - left: 0; 115 - top: 11px; 116 - color: @brand; 117 - } 118 - } 119 -} 120 - 121 -.resource-sidebar { 122 - position: sticky; 123 - top: 96px; 124 - border: 1px solid @line; 125 - border-radius: @radius; 126 - padding: 18px; 127 - background: #fff; 128 - box-shadow: @shadow-sm; 129 - 130 - h4 { 131 - margin: 0 0 10px; 132 - } 133 - 134 - ul { 135 - margin: 0; 136 - padding-left: 18px; 137 - color: @muted; 138 - } 139 - 140 - li { 141 - margin: 8px 0; 142 - } 143 - 144 - a { 145 - color: @brand; 146 - font-weight: 600; 147 - } 148 -} 149 - 150 -.resource-cta { 151 - margin-top: 36px; 152 - padding: 22px; 153 - border: 1px solid fade(@brand, 20%); 154 - border-radius: @radius; 155 - background: @brand-bg; 156 - 157 - h3 { 158 - margin-top: 0; 159 - } 160 - 161 - p { 162 - color: @muted; 163 - } 164 -} 165 - 166 -@media (max-width: 900px) { 167 - .resource-layout { 168 - grid-template-columns: 1fr; 169 - } 170 - 171 - .resource-sidebar { 172 - position: static; 173 - } 174 -} - contentType
-
... ... @@ -1,1 +1,0 @@ 1 -LESS - name
-
... ... @@ -1,1 +1,0 @@ 1 -resources - use
-
... ... @@ -1,1 +1,0 @@ 1 -onDemand