Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Objects (2 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -599,31 +599,6 @@ 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 - } 621 - 622 - .resource-content { 623 - order: 1; 624 - } 625 -} 626 - 627 627 /* ========== CTA ========== */ 628 628 629 629 .cta-section { ... ... @@ -1173,141 +1173,3 @@ 1173 1173 padding: 20px; 1174 1174 } 1175 1175 } 1176 -/* ========== Resources Index ========== */ 1177 - 1178 -.resources-index-page { 1179 - padding: 56px 0 72px; 1180 - background: @brand-bg; 1181 -} 1182 - 1183 -.resources-intro { 1184 - max-width: 820px; 1185 - margin: 0 auto 32px; 1186 - text-align: center; 1187 -} 1188 - 1189 -.resources-intro p { 1190 - color: @muted; 1191 - font-size: 17px; 1192 - line-height: 1.7; 1193 - margin: 0; 1194 -} 1195 - 1196 -.resources-grid { 1197 - display: grid; 1198 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1199 - gap: 24px; 1200 - margin-bottom: 36px; 1201 -} 1202 - 1203 -.resource-card { 1204 - display: flex; 1205 - gap: 18px; 1206 - background: #fff; 1207 - border: 1px solid @line; 1208 - border-radius: @radius; 1209 - box-shadow: @shadow-sm; 1210 - padding: 24px; 1211 -} 1212 - 1213 -.resource-card-icon { 1214 - flex: 0 0 46px; 1215 - width: 46px; 1216 - height: 46px; 1217 - border-radius: 14px; 1218 - background: @brand-soft; 1219 - color: @brand-strong; 1220 - display: flex; 1221 - align-items: center; 1222 - justify-content: center; 1223 - font-size: 20px; 1224 -} 1225 - 1226 -.resource-card-label { 1227 - color: @brand-strong; 1228 - font-size: 13px; 1229 - font-weight: 700; 1230 - text-transform: uppercase; 1231 - letter-spacing: .04em; 1232 - margin-bottom: 8px; 1233 -} 1234 - 1235 -.resource-card h2 { 1236 - font-size: 22px; 1237 - line-height: 1.25; 1238 - margin: 0 0 12px; 1239 -} 1240 - 1241 -.resource-card h2 a { 1242 - color: @text; 1243 - text-decoration: none; 1244 -} 1245 - 1246 -.resource-card h2 a:hover { 1247 - color: @brand-strong; 1248 - text-decoration: none; 1249 -} 1250 - 1251 -.resource-card p { 1252 - color: @muted; 1253 - font-size: 15px; 1254 - line-height: 1.65; 1255 - margin: 0 0 16px; 1256 -} 1257 - 1258 -.resource-card-link { 1259 - color: @brand-strong; 1260 - font-weight: 700; 1261 - text-decoration: none; 1262 -} 1263 - 1264 -.resource-card-link:hover { 1265 - color: @brand; 1266 - text-decoration: none; 1267 -} 1268 - 1269 -.resources-next { 1270 - max-width: 820px; 1271 - margin: 0 auto 32px; 1272 - text-align: center; 1273 -} 1274 - 1275 -.resources-next h2 { 1276 - font-size: 26px; 1277 - margin: 0 0 10px; 1278 -} 1279 - 1280 -.resources-next p { 1281 - color: @muted; 1282 - font-size: 16px; 1283 - line-height: 1.7; 1284 - margin: 0; 1285 -} 1286 - 1287 -@media (max-width: 767px) { 1288 - .resources-index-page { 1289 - padding: 36px 0 52px; 1290 - } 1291 - 1292 - .resources-intro { 1293 - text-align: left; 1294 - margin-bottom: 24px; 1295 - } 1296 - 1297 - .resources-grid { 1298 - grid-template-columns: 1fr; 1299 - gap: 18px; 1300 - } 1301 - 1302 - .resource-card { 1303 - padding: 20px; 1304 - } 1305 - 1306 - .resource-card h2 { 1307 - font-size: 20px; 1308 - } 1309 - 1310 - .resources-next { 1311 - text-align: left; 1312 - } 1313 -}
- XWiki.StyleSheetExtension[1]
-
- code
-
... ... @@ -1,156 +1,156 @@ 1 1 /* ========== Agnease Public Top Menu ========== */ 2 2 3 - /* Desktopalignment*/4 -@ media(min-width: 768px) {5 - .site-nav{6 - margin-left:auto;7 - justify-content:flex-end;8 - }3 +@brand: #00937D; 4 +@brand-strong: #007B6A; 5 +@text: #2D3A34; 6 +@muted: #5B6B64; 7 +@line: #E4ECE9; 8 +@brand-bg: #F4FCFA; 9 9 10 - .site-nav .agnease-menu-item, 11 - .site-nav .agnease-menu-link { 12 - display: inline-block; 13 - } 14 -} 15 - 16 16 /* Top-level menu items */ 17 17 18 -.agnease-menu-item, 19 -.agnease-menu-link { 20 - > a, 21 - > .dropdown-toggle { 22 - color: @brand; 23 - font-size: 17px; 24 - font-weight: 600; 25 - padding-left: 16px; 26 - padding-right: 16px; 27 - text-decoration: none; 12 +.agnease-services-menu, 13 +.agnease-products-menu { 14 + .dropdown-toggle { 15 + font-weight: inherit; 16 + font-size: inherit; 28 28 } 29 29 30 - > a:hover, 31 - > a:focus, 32 - > a:active, 33 - &.open > a, 34 - &.active > a { 35 - color: @brand-strong; 36 - text-decoration: none; 37 - outline: none; 38 - } 39 - 40 40 .caret { 41 - margin-left: 5px; 42 - border-top-color: @brand; 43 - border-bottom-color: @brand; 20 + margin-left: 4px; 44 44 } 45 45 46 - > a:hover.caret,47 - > a:focus.caret,48 - > a:active.caret,49 - &.open>a .caret,50 - &.active>a.caret{51 - b order-top-color:@brand-strong;52 - bo rder-bottom-color:@brand-strong;23 + &.open > .dropdown-toggle, 24 + .dropdown-toggle:hover, 25 + .dropdown-toggle:focus { 26 + color: @brand-strong; 27 + background: transparent; 28 + background-color: transparent; 29 + box-shadow: none; 53 53 } 54 54 } 55 55 56 -/* Dropdown panel*/33 +/* Keep Agnease public top-level menu visually clean when hovered/open/focused */ 57 57 58 -.agnease-dropdown { 59 - min-width: 310px; 60 - padding: 10px 8px; 61 - border: 1px solid fade(@brand, 18%); 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; 51 +} 52 + 53 +/* Dropdown panels */ 54 + 55 +.agnease-services-dropdown, 56 +.agnease-products-dropdown { 57 + min-width: 360px; 58 + padding: 10px; 59 + border: 1px solid @line; 62 62 border-radius: 12px; 63 - background: #fff; 64 - box-shadow: 0 12px 32px fade(@brand-strong, 12%); 61 + box-shadow: 0 12px 36px rgba(0, 0, 0, .10); 65 65 66 66 > li > a { 67 67 display: flex; 68 - align-items: center;65 + align-items: flex-start; 69 69 gap: 12px; 70 - padding: 11px 14px; 71 - color: @brand; 72 - white-space: nowrap; 73 - font-size: 16px; 74 - font-weight: 600; 75 - line-height: 1.3; 76 - text-decoration: none; 67 + padding: 10px 12px; 68 + border-radius: 10px; 69 + color: @text; 70 + white-space: normal; 77 77 78 - i { 79 - width: 20px; 80 - flex: 0 0 20px; 81 - color: @brand; 82 - text-align: center; 83 - font-size: 15px; 84 - } 85 - 86 86 &:hover, 87 - &:focus, 88 - &:active { 73 + &:focus { 89 89 color: @brand-strong; 75 + background: @brand-bg; 90 90 text-decoration: none; 91 - outline: none; 92 92 93 - i { 78 + .menu-icon { 94 94 color: @brand-strong; 80 + background: fade(@brand, 14%); 81 + border-color: fade(@brand, 28%); 95 95 } 96 - } 97 - } 98 98 99 - > .active > a { 100 - color: @brand-strong; 84 + strong { 85 + color: @brand-strong; 86 + } 101 101 102 - i { 103 - color: @brand-strong; 88 + small { 89 + color: @muted; 90 + } 104 104 } 105 105 } 106 106 107 107 .divider { 108 108 margin: 8px 0; 109 - background-color: fade(@brand, 16%);96 + background-color: @line; 110 110 } 111 -} 112 112 113 -/* Mobile */ 114 - 115 -@media (max-width: 767px) { 116 - .site-nav { 117 - margin-left: 0; 99 + .menu-icon { 100 + width: 34px; 101 + height: 34px; 102 + border-radius: 50%; 103 + background: fade(@brand, 8%); 104 + border: 1px solid fade(@brand, 18%); 105 + color: @brand; 106 + display: flex; 107 + align-items: center; 118 118 justify-content: center; 119 - flex-wrap: wrap; 109 + flex-shrink: 0; 110 + transition: color .15s ease, background .15s ease, border-color .15s ease; 120 120 } 121 121 122 - .agnease-menu-item, 123 - .agnease-menu-link { 124 - > a, 125 - > .dropdown-toggle { 126 - font-size: 16px; 127 - padding-top: 9px; 128 - padding-bottom: 9px; 113 + .menu-text { 114 + display: flex; 115 + flex-direction: column; 116 + line-height: 1.25; 117 + 118 + strong { 119 + color: @brand; 120 + font-size: 14px; 121 + font-weight: 600; 129 129 } 123 + 124 + small { 125 + color: @muted; 126 + font-size: 12px; 127 + margin-top: 2px; 128 + font-weight: 400; 129 + } 130 130 } 131 +} 131 131 132 - .agnease-dropdown { 133 +/* Products dropdown can be slightly narrower for now */ 134 + 135 +.agnease-products-dropdown { 136 + min-width: 340px; 137 +} 138 + 139 +/* Mobile */ 140 + 141 +@media (max-width: 767px) { 142 + .agnease-services-dropdown, 143 + .agnease-products-dropdown { 133 133 min-width: 0; 134 134 width: 100%; 135 - padding: 4px 8px 8px 18px; 136 - border: 0; 146 + padding: 6px; 137 137 border-radius: 0; 148 + border-left: 0; 149 + border-right: 0; 138 138 box-shadow: none; 139 - background: transparent; 140 140 141 141 > li > a { 142 - padding: 8px 10px; 143 - white-space: normal; 144 - font-size: 15px; 145 - 146 - i { 147 - width: 18px; 148 - flex-basis: 18px; 149 - } 153 + padding: 10px; 150 150 } 151 - 152 - .divider { 153 - margin: 5px 0; 154 - } 155 155 } 156 156 }