Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/05/30 16:24
From version 6.28
edited by Agnease
on 2026/05/12 12:00
Change comment: There is no comment for this version
To version 6.50
edited by Agnease
on 2026/05/12 14:03
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -7,7 +7,7 @@
7 7   <div class="container hero-inner">
8 8   <div class="hero-kicker">
9 9   <i class="fa fa-shield" aria-hidden="true"></i>
10 - XWiki consulting, upgrades and long-term support
10 + Your trusted partner for professional XWiki services
11 11   </div>
12 12  
13 13   <h1 id="hero-title">Reliable XWiki engineering for organizations that depend on their knowledge platform</h1>
... ... @@ -70,7 +70,7 @@
70 70   <li>Production rollout validation</li>
71 71   </ul>
72 72   <p class="card-link">
73 - <a href="/services/xwiki-upgrades">View upgrade services</a>
73 + <a href="$xwiki.getURL('services.xwiki-upgrades')">View upgrade services</a>
74 74   </p>
75 75   </article>
76 76  
... ... @@ -88,7 +88,7 @@
88 88   <li>Security-aware maintenance</li>
89 89   </ul>
90 90   <p class="card-link">
91 - <a href="/services/xwiki-maintenance-support">View support services</a>
91 + <a href="$xwiki.getURL('services.xwiki-maintenance-support')">View support services</a>
92 92   </p>
93 93   </article>
94 94  
... ... @@ -106,7 +106,7 @@
106 106   <li>SSO, LDAP, APIs and integrations</li>
107 107   </ul>
108 108   <p class="card-link">
109 - <a href="/services/xwiki-development-integrations">View development services</a>
109 + <a href="$xwiki.getURL('services.xwiki-development-integrations')">View development services</a>
110 110   </p>
111 111   </article>
112 112   </div>
... ... @@ -231,5 +231,4 @@
231 231   </dl>
232 232   </div>
233 233  #end
234 -#displayPublicContent
235 235  {{/velocity}}
XWiki.StyleSheetExtension[0]
code
... ... @@ -1,14 +1,19 @@
1 -/* ========== Agnease Landing (no Bootstrap grid) ========== */
1 +/* ========== Agnease Public Website ========== */
2 +
2 2  @brand: #00937D;
3 3  @brand-strong: #007B6A;
5 +@brand-soft: #E7FFF8;
6 +@brand-bg: #F4FCFA;
4 4  @text: #2D3A34;
5 5  @muted: #5B6B64;
6 6  @line: #E4ECE9;
7 7  @radius: 16px;
8 -@shadow-sm: 0 6px 20px rgba(0,0,0,.06);
9 -@shadow: 0 12px 36px rgba(0,0,0,.08);
11 +@shadow-sm: 0 6px 20px rgba(0, 0, 0, .06);
12 +@shadow: 0 12px 36px rgba(0, 0, 0, .08);
10 10  @maxw: 1140px;
11 11  
15 +/* ========== Base ========== */
16 +
12 12  #mainContentArea {
13 13   padding: 0;
14 14  }
... ... @@ -15,27 +15,148 @@
15 15  
16 16  .container {
17 17   max-width: @maxw;
23 + margin-left: auto;
24 + margin-right: auto;
25 + padding-left: 18px;
26 + padding-right: 18px;
18 18  }
19 19  
29 +html {
30 + scroll-behavior: smooth;
31 +}
32 +
33 +section {
34 + padding: 42px 0;
35 + border-top: 1px solid @line;
36 +
37 + &:first-of-type {
38 + border-top: none;
39 + }
40 +}
41 +
42 +section[id] {
43 + scroll-margin-top: 92px;
44 +}
45 +
46 +h1,
47 +h2,
48 +h3,
49 +h4 {
50 + color: @text;
51 +}
52 +
53 +h2 {
54 + text-align: center;
55 + margin-top: 0;
56 +}
57 +
20 20  .lead {
21 21   color: @muted;
22 22   text-align: center;
23 23   margin-bottom: 0;
24 24  }
25 -h2 {
63 +
64 +.section-intro {
65 + max-width: 760px;
66 + margin: 0 auto 22px;
26 26   text-align: center;
68 + color: @muted;
69 + font-size: 16px;
70 + line-height: 1.55;
27 27  }
28 28  
29 -section {
30 - padding: 32px 0;
31 - border-top: 1px solid @line;
73 +a {
74 + color: @brand;
32 32  
33 - &:first-of-type {
34 - border-top: none;
76 + &:hover,
77 + &:focus {
78 + color: @brand-strong;
35 35   }
36 36  }
37 37  
38 -/* ===== HERO ===== */
82 +/* ========== Header / Navigation ========== */
83 +
84 +.site-header {
85 + position: sticky;
86 + top: 0;
87 + z-index: 1000;
88 + background: fade(#fff, 96%);
89 + border-bottom: 1px solid fade(@line, 85%);
90 + backdrop-filter: blur(8px);
91 +}
92 +
93 +.header-inner {
94 + min-height: 72px;
95 + display: flex;
96 + align-items: center;
97 + justify-content: space-between;
98 + gap: 24px;
99 +}
100 +
101 +.site-nav {
102 + display: flex;
103 + align-items: center;
104 + gap: 22px;
105 + font-size: 15px;
106 +
107 + a {
108 + color: @text;
109 + text-decoration: none;
110 + font-weight: 600;
111 +
112 + &:hover,
113 + &:focus {
114 + color: @brand;
115 + text-decoration: none;
116 + }
117 + }
118 +
119 + .nav-cta {
120 + color: #fff;
121 + background: @brand;
122 + border: 1px solid @brand;
123 + border-radius: 6px;
124 + padding: 8px 14px;
125 +
126 + &:hover,
127 + &:focus {
128 + color: #fff;
129 + background: @brand-strong;
130 + border-color: @brand-strong;
131 + }
132 + }
133 +}
134 +
135 +/* ========== Buttons ========== */
136 +
137 +.btn-primary {
138 + background: @brand;
139 + border-color: @brand;
140 + color: #fff;
141 +
142 + &:hover,
143 + &:focus {
144 + background: @brand-strong;
145 + border-color: @brand-strong;
146 + color: #fff;
147 + }
148 +}
149 +
150 +.btn-secondary {
151 + color: @brand;
152 + background: #fff;
153 + border: 1px solid fade(@brand, 35%);
154 +
155 + &:hover,
156 + &:focus {
157 + color: @brand-strong;
158 + border-color: @brand;
159 + background: @brand-bg;
160 + }
161 +}
162 +
163 +/* ========== Hero ========== */
164 +
39 39  .hero {
40 40   overflow: hidden;
41 41   background-repeat: no-repeat;
... ... @@ -44,16 +44,16 @@
44 44   &.hero-centered {
45 45   text-align: center;
46 46   background:
47 - radial-gradient(50rem 18rem at 50% -10%, #E7FFF8 0%, transparent 60%),
173 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
48 48   radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
49 49   display: flex;
50 50   align-items: center;
51 51   justify-content: center;
52 - min-height: 300px;
178 + min-height: 330px;
53 53   }
54 54  
55 55   .hero-inner {
56 - max-width: 850px;
182 + max-width: 860px;
57 57   margin: 0 auto;
58 58   display: flex;
59 59   flex-direction: column;
... ... @@ -60,14 +60,19 @@
60 60   align-items: center;
61 61   }
62 62  
63 - #hero-cta {
64 - display: flex;
65 - gap: 0.8rem;
66 - flex-wrap: wrap;
67 - justify-content: center;
68 - margin-top: 1.3rem;
189 + h1 {
190 + max-width: 790px;
191 + margin-left: auto;
192 + margin-right: auto;
193 + line-height: 1.18;
69 69   }
70 70  
196 + .lead {
197 + max-width: 760px;
198 + font-size: 19px;
199 + line-height: 1.55;
200 + }
201 +
71 71   .benefits {
72 72   display: flex;
73 73   flex-wrap: wrap;
... ... @@ -74,171 +74,17 @@
74 74   justify-content: center;
75 75   list-style: none;
76 76   padding: 0;
77 - margin: 0.8rem 0 0;
208 + margin: 14px 0 0;
78 78   color: @muted;
79 79   font-size: 14px;
80 80  
81 81   li + li::before {
82 82   content: "•";
83 - margin: 0 5px;
214 + margin: 0 6px;
84 84   }
85 -
86 - @media (max-width: 640px) {
87 - li + li::before {
88 - content: none;
89 - }
90 - li:nth-child(1)::after,
91 - li:nth-child(3)::after {
92 - content: "•";
93 - margin: 0 5px;
94 - }
95 - }
96 96   }
97 97  }
98 98  
99 -/* ===== WHY CHOOSE (cards) ===== */
100 -.widgets {
101 - margin-top: 12px;
102 - display: grid;
103 - grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
104 - grid-gap: 16px;
105 -}
106 -
107 -.widget {
108 - padding: 18px;
109 - background: #fff;
110 - border: 1px solid @line;
111 - border-radius: @radius;
112 - box-shadow: @shadow-sm;
113 - transition: transform .18s ease, box-shadow .18s ease;
114 - display: flex;
115 - flex-direction: column;
116 - height: 100%;
117 -
118 - &:hover {
119 - transform: translateY(-2px);
120 - box-shadow: @shadow;
121 - }
122 -
123 - .icon {
124 - display: flex;
125 - align-items: center;
126 - gap: 10px;
127 - padding-bottom: 6px;
128 - margin-bottom: 8px;
129 - border-bottom: 1px solid fade(@line, 60%);
130 - i { color: @brand; }
131 - h4 { margin: 0; line-height: 1.2; color: @text; }
132 - }
133 -
134 - p {
135 - margin: 0;
136 - color: @muted;
137 - line-height: 1.45;
138 - }
139 -}
140 -
141 -/* ===== SERVICES ===== */
142 -.services {
143 - .services-grid {
144 - margin-top: 20px;
145 - display: flex;
146 - flex-wrap: wrap;
147 - gap: 24px;
148 -
149 - /* center the whole block under the heading */
150 - max-width: 960px;
151 - margin-left: auto;
152 - margin-right: auto;
153 - justify-content: center;
154 - }
155 -
156 - .service {
157 - flex: 0 1 calc(50% - 12px);
158 - display: flex;
159 - align-items: flex-start;
160 - gap: 16px;
161 - margin-bottom: 8px;
162 -
163 - .service-icon {
164 - width: 42px;
165 - height: 42px;
166 - border-radius: 50%;
167 - display: flex;
168 - align-items: center;
169 - justify-content: center;
170 - font-size: 18px;
171 - color: @brand;
172 - background: fade(@brand, 10%);
173 - flex-shrink: 0;
174 - margin-top: 3px;
175 - }
176 -
177 - .service-body {
178 - h4 {
179 - margin: 0 0 4px;
180 - font-size: 1.125rem;
181 - font-weight: 800;
182 - }
183 - p {
184 - margin: 0 0 6px;
185 - color: @text;
186 - line-height: 1.5;
187 - }
188 - ul {
189 - margin: .45rem 0 0;
190 - padding-left: 1.1rem;
191 - color: @muted;
192 - font-size: 13px;
193 - }
194 - li {
195 - margin: .25rem 0;
196 - line-height: 1.45;
197 - }
198 - }
199 - }
200 -
201 - /* ==== Center last item on its own row while keeping 50% width ==== */
202 - .service-center {
203 - /* same width as siblings */
204 - flex: 0 1 calc(55% - 12px);
205 -
206 - /* push to center */
207 - margin-left: auto;
208 - margin-right: auto;
209 - }
210 -
211 - /* Mobile: 1 per row */
212 - @media (max-width: 767px) {
213 - .services-grid {
214 - gap: 16px;
215 - max-width: 100%;
216 - }
217 -
218 - .service,
219 - .service-center {
220 - flex: 0 1 100%;
221 - margin-left: 0;
222 - margin-right: 0;
223 - }
224 - }
225 -}
226 -
227 -/* ===== CTA ===== */
228 -.cta-section {
229 - padding: 24px 0 16px;
230 -
231 - .contact-inline {
232 - margin: 0;
233 - color: @muted;
234 - a { color: @brand; }
235 - }
236 -}
237 -/* ========== Agnease Revamp Additions ========== */
238 -
239 -@brand-soft: #E7FFF8;
240 -@brand-bg: #F4FCFA;
241 -
242 242  .hero-kicker {
243 243   display: inline-flex;
244 244   align-items: center;
... ... @@ -253,19 +253,6 @@
253 253   font-weight: 700;
254 254  }
255 255  
256 -.hero h1 {
257 - max-width: 760px;
258 - margin-left: auto;
259 - margin-right: auto;
260 - line-height: 1.18;
261 -}
262 -
263 -.hero .lead {
264 - max-width: 760px;
265 - font-size: 19px;
266 - line-height: 1.55;
267 -}
268 -
269 269  .hero-support {
270 270   max-width: 760px;
271 271   margin: 14px auto 0;
... ... @@ -273,27 +273,17 @@
273 273   line-height: 1.55;
274 274  }
275 275  
276 -.hero-actions {
240 +.hero-actions,
241 +#hero-cta {
277 277   display: flex;
278 278   gap: 12px;
279 279   flex-wrap: wrap;
280 280   justify-content: center;
281 281   margin-top: 22px;
282 -
283 - .btn-secondary {
284 - color: @brand;
285 - background: #fff;
286 - border: 1px solid fade(@brand, 35%);
287 -
288 - &:hover,
289 - &:focus {
290 - color: @brand-strong;
291 - border-color: @brand;
292 - background: @brand-bg;
293 - }
294 - }
295 295  }
296 296  
249 +/* ========== Trust Strip ========== */
250 +
297 297  .trust-strip {
298 298   padding: 18px 0;
299 299   border-top: 1px solid @line;
... ... @@ -301,7 +301,7 @@
301 301   background: #fff;
302 302  
303 303   ul {
304 - max-width: 920px;
258 + max-width: 960px;
305 305   margin: 0 auto;
306 306   padding: 0;
307 307   list-style: none;
... ... @@ -324,36 +324,110 @@
324 324   }
325 325  }
326 326  
327 -.section-intro {
328 - max-width: 760px;
329 - margin: 0 auto 18px;
330 - text-align: center;
331 - color: @muted;
332 - font-size: 16px;
333 - line-height: 1.55;
334 -}
281 +/* ========== Reusable Grids ========== */
335 335  
336 -.pathways {
283 +.card-grid,
284 +.pathways,
285 +.services-grid,
286 +.resource-grid,
287 +.widgets {
337 337   display: grid;
338 - grid-template-columns: repeat(3, minmax(0, 1fr));
339 339   grid-gap: 18px;
290 + margin-left: auto;
291 + margin-right: auto;
292 +}
293 +
294 +.card-grid,
295 +.pathways,
296 +.services-grid {
297 + grid-template-columns: repeat(3, minmax(0, 1fr));
340 340   max-width: 1040px;
341 - margin: 22px auto 0;
299 + margin-top: 26px;
342 342  }
343 343  
344 -.pathway-card {
302 +.resource-grid {
303 + grid-template-columns: repeat(2, minmax(0, 1fr));
304 + max-width: 1040px;
305 + margin-top: 22px;
306 +}
307 +
308 +.widgets {
309 + grid-template-columns: repeat(4, minmax(0, 1fr));
310 + max-width: 1040px;
311 + margin-top: 20px;
312 +}
313 +
314 +.card-grid > *,
315 +.pathways > *,
316 +.services-grid > *,
317 +.resource-grid > *,
318 +.widgets > * {
319 + min-width: 0;
320 +}
321 +
322 +/* ========== Shared Card Style ========== */
323 +
324 +.widget,
325 +.pathway-card,
326 +.service-card,
327 +.resource-card {
345 345   background: #fff;
346 346   border: 1px solid @line;
347 347   border-radius: @radius;
348 348   box-shadow: @shadow-sm;
349 - padding: 22px;
332 + transition: transform .18s ease, box-shadow .18s ease;
333 +
334 + &:hover {
335 + transform: translateY(-2px);
336 + box-shadow: @shadow;
337 + }
338 +}
339 +
340 +/* ========== Small Widgets ========== */
341 +
342 +.widget {
343 + padding: 18px;
350 350   display: flex;
351 351   flex-direction: column;
346 + height: 100%;
347 +
348 + .icon {
349 + display: flex;
350 + align-items: center;
351 + gap: 10px;
352 + padding-bottom: 8px;
353 + margin-bottom: 10px;
354 + border-bottom: 1px solid fade(@line, 70%);
355 +
356 + i {
357 + color: @brand;
358 + }
359 +
360 + h4 {
361 + margin: 0;
362 + line-height: 1.25;
363 + color: @text;
364 + }
365 + }
366 +
367 + p {
368 + margin: 0;
369 + color: @muted;
370 + line-height: 1.45;
371 + }
372 +}
373 +
374 +/* ========== Homepage Pathway Cards ========== */
375 +
376 +.pathway-card {
377 + padding: 24px;
378 + display: flex;
379 + flex-direction: column;
352 352   min-height: 100%;
353 353  
354 354   .pathway-icon {
355 - width: 46px;
356 - height: 46px;
383 + width: 52px;
384 + height: 52px;
357 357   border-radius: 50%;
358 358   display: flex;
359 359   align-items: center;
... ... @@ -360,14 +360,14 @@
360 360   justify-content: center;
361 361   color: @brand;
362 362   background: fade(@brand, 10%);
363 - margin-bottom: 14px;
364 - font-size: 18px;
391 + margin-bottom: 18px;
392 + font-size: 19px;
365 365   }
366 366  
367 367   h3 {
368 - margin: 0 0 8px;
396 + margin: 0 0 10px;
369 369   color: @text;
370 - font-size: 20px;
398 + font-size: 22px;
371 371   line-height: 1.25;
372 372   }
373 373  
... ... @@ -374,30 +374,107 @@
374 374   p {
375 375   color: @muted;
376 376   line-height: 1.55;
377 - margin: 0 0 14px;
405 + margin: 0 0 16px;
378 378   }
379 379  
380 380   ul {
381 - margin: 0 0 18px;
409 + margin: 0 0 22px;
382 382   padding-left: 18px;
383 383   color: @muted;
384 - font-size: 13px;
412 + font-size: 14px;
413 + line-height: 1.55;
385 385   }
386 386  
387 387   li {
388 - margin: 5px 0;
417 + margin: 6px 0;
389 389   }
390 390  
391 391   .card-link {
392 392   margin-top: auto;
422 + padding-top: 4px;
393 393  
394 394   a {
395 395   color: @brand;
396 396   font-weight: 700;
427 + text-decoration: underline;
428 +
429 + &:hover,
430 + &:focus {
431 + color: @brand-strong;
432 + }
397 397   }
398 398   }
399 399  }
400 400  
437 +/* ========== Services ========== */
438 +
439 +.services {
440 + .services-grid {
441 + max-width: 1040px;
442 + }
443 +
444 + .service {
445 + display: flex;
446 + align-items: flex-start;
447 + gap: 16px;
448 + padding: 22px;
449 + background: #fff;
450 + border: 1px solid @line;
451 + border-radius: @radius;
452 + box-shadow: @shadow-sm;
453 + transition: transform .18s ease, box-shadow .18s ease;
454 +
455 + &:hover {
456 + transform: translateY(-2px);
457 + box-shadow: @shadow;
458 + }
459 +
460 + .service-icon {
461 + width: 46px;
462 + height: 46px;
463 + border-radius: 50%;
464 + display: flex;
465 + align-items: center;
466 + justify-content: center;
467 + font-size: 18px;
468 + color: @brand;
469 + background: fade(@brand, 10%);
470 + flex-shrink: 0;
471 + margin-top: 2px;
472 + }
473 +
474 + .service-body {
475 + h4 {
476 + margin: 0 0 6px;
477 + font-size: 18px;
478 + line-height: 1.25;
479 + font-weight: 800;
480 + color: @text;
481 + }
482 +
483 + p {
484 + margin: 0 0 8px;
485 + color: @muted;
486 + line-height: 1.5;
487 + }
488 +
489 + ul {
490 + margin: 9px 0 0;
491 + padding-left: 18px;
492 + color: @muted;
493 + font-size: 13px;
494 + line-height: 1.5;
495 + }
496 +
497 + li {
498 + margin: 4px 0;
499 + }
500 + }
501 + }
502 +}
503 +
504 +/* ========== Split / Process Section ========== */
505 +
401 401  .split-section {
402 402   background:
403 403   radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
... ... @@ -429,75 +429,82 @@
429 429   margin: 0;
430 430   padding: 0;
431 431   list-style: none;
432 -}
433 433  
434 -.process-list li {
435 - counter-increment: process;
436 - position: relative;
437 - padding: 16px 16px 16px 58px;
438 - margin-bottom: 12px;
439 - background: #fff;
440 - border: 1px solid @line;
441 - border-radius: @radius;
442 - box-shadow: @shadow-sm;
443 - color: @muted;
444 - line-height: 1.5;
538 + li {
539 + counter-increment: process;
540 + position: relative;
541 + padding: 16px 16px 16px 58px;
542 + margin-bottom: 12px;
543 + background: #fff;
544 + border: 1px solid @line;
545 + border-radius: @radius;
546 + box-shadow: @shadow-sm;
547 + color: @muted;
548 + line-height: 1.5;
445 445  
446 - &:before {
447 - content: counter(process);
448 - position: absolute;
449 - left: 16px;
450 - top: 16px;
451 - width: 28px;
452 - height: 28px;
453 - border-radius: 50%;
454 - background: fade(@brand, 10%);
455 - color: @brand;
456 - display: flex;
457 - align-items: center;
458 - justify-content: center;
459 - font-weight: 800;
460 - }
550 + &:before {
551 + content: counter(process);
552 + position: absolute;
553 + left: 16px;
554 + top: 16px;
555 + width: 28px;
556 + height: 28px;
557 + border-radius: 50%;
558 + background: fade(@brand, 10%);
559 + color: @brand;
560 + display: flex;
561 + align-items: center;
562 + justify-content: center;
563 + font-weight: 800;
564 + }
461 461  
462 - strong {
463 - display: block;
464 - color: @text;
465 - margin-bottom: 3px;
566 + strong {
567 + display: block;
568 + color: @text;
569 + margin-bottom: 3px;
570 + }
466 466   }
467 467  }
468 468  
574 +/* ========== Resources ========== */
575 +
469 469  .resource-strip {
470 470   background: @brand-bg;
578 +}
471 471  
472 - .resource-grid {
473 - max-width: 1040px;
474 - margin: 20px auto 0;
475 - display: grid;
476 - grid-template-columns: repeat(2, minmax(0, 1fr));
477 - grid-gap: 16px;
580 +.resource-card {
581 + padding: 20px;
582 +
583 + h4 {
584 + margin: 0 0 8px;
585 + color: @text;
586 + font-size: 18px;
587 + line-height: 1.25;
478 478   }
479 479  
480 - .resource-card {
481 - background: #fff;
482 - border: 1px solid @line;
483 - border-radius: @radius;
484 - padding: 18px;
485 - box-shadow: @shadow-sm;
590 + p {
591 + color: @muted;
592 + margin: 0 0 12px;
593 + line-height: 1.5;
594 + }
486 486  
487 - h4 {
488 - margin: 0 0 6px;
489 - color: @text;
490 - }
596 + a {
597 + color: @brand;
598 + font-weight: 700;
599 + }
600 +}
491 491  
492 - p {
493 - color: @muted;
494 - margin: 0 0 10px;
495 - line-height: 1.5;
496 - }
602 +/* ========== CTA ========== */
497 497  
604 +.cta-section {
605 + padding: 32px 0 24px;
606 +
607 + .contact-inline {
608 + margin: 0;
609 + color: @muted;
610 +
498 498   a {
499 499   color: @brand;
500 - font-weight: 700;
501 501   }
502 502   }
503 503  }
... ... @@ -505,7 +505,7 @@
505 505  .cta-panel {
506 506   max-width: 860px;
507 507   margin: 0 auto;
508 - padding: 30px;
620 + padding: 32px;
509 509   border-radius: @radius;
510 510   border: 1px solid fade(@brand, 20%);
511 511   background:
... ... @@ -523,10 +523,17 @@
523 523   }
524 524  }
525 525  
526 -@media (max-width: 900px) {
638 +/* ========== Responsive ========== */
639 +
640 +@media (max-width: 980px) {
641 + .widgets,
527 527   .pathways,
528 - .split-grid,
529 - .resource-strip .resource-grid {
643 + .services-grid,
644 + .resource-grid {
645 + grid-template-columns: repeat(2, minmax(0, 1fr));
646 + }
647 +
648 + .split-grid {
530 530   grid-template-columns: 1fr;
531 531   }
532 532  
... ... @@ -535,3 +535,75 @@
535 535   }
536 536  }
537 537  
657 +@media (max-width: 760px) {
658 + section[id] {
659 + scroll-margin-top: 132px;
660 + }
661 +
662 + .header-inner {
663 + min-height: auto;
664 + padding-top: 14px;
665 + padding-bottom: 14px;
666 + flex-direction: column;
667 + align-items: center;
668 + gap: 12px;
669 + }
670 +
671 + .site-nav {
672 + width: 100%;
673 + justify-content: center;
674 + flex-wrap: wrap;
675 + gap: 10px 16px;
676 + font-size: 14px;
677 +
678 + .nav-cta {
679 + padding: 7px 12px;
680 + }
681 + }
682 +
683 + .hero.hero-centered {
684 + min-height: 280px;
685 + }
686 +
687 + .hero {
688 + .lead {
689 + font-size: 17px;
690 + }
691 +
692 + .benefits {
693 + gap: 4px 10px;
694 +
695 + li + li::before {
696 + content: none;
697 + }
698 + }
699 + }
700 +}
701 +
702 +@media (max-width: 640px) {
703 + section {
704 + padding: 34px 0;
705 + }
706 +
707 + .widgets,
708 + .pathways,
709 + .services-grid,
710 + .resource-grid {
711 + grid-template-columns: 1fr;
712 + }
713 +
714 + .pathway-card,
715 + .services .service,
716 + .resource-card,
717 + .widget {
718 + padding: 20px;
719 + }
720 +
721 + .services .service {
722 + gap: 14px;
723 + }
724 +
725 + .cta-panel {
726 + padding: 24px 20px;
727 + }
728 +}
XWiki.StyleSheetExtension[1]
cache
... ... @@ -1,0 +1,1 @@
1 +long
code
... ... @@ -1,0 +1,217 @@
1 +/* ========== Agnease Public Top Menu ========== */
2 +
3 +@brand: #00937D;
4 +@brand-strong: #007B6A;
5 +@text: #2D3A34;
6 +@muted: #5B6B64;
7 +@line: #E4ECE9;
8 +@brand-bg: #F4FCFA;
9 +
10 +.agnease-services-menu {
11 + .dropdown-toggle {
12 + font-weight: inherit;
13 + font-size: inherit;
14 + }
15 +
16 + &.open > .dropdown-toggle,
17 + .dropdown-toggle:hover,
18 + .dropdown-toggle:focus {
19 + color: @brand;
20 + background: transparent;
21 + }
22 +
23 + .caret {
24 + margin-left: 4px;
25 + }
26 +}
27 +
28 +.agnease-services-dropdown {
29 + min-width: 360px;
30 + padding: 10px;
31 + border: 1px solid @line;
32 + border-radius: 12px;
33 + box-shadow: 0 12px 36px rgba(0, 0, 0, .10);
34 +
35 + > li > a {
36 + display: flex;
37 + align-items: flex-start;
38 + gap: 12px;
39 + padding: 10px 12px;
40 + border-radius: 10px;
41 + color: @text;
42 + white-space: normal;
43 +
44 + &:hover,
45 + &:focus {
46 + color: @brand-strong;
47 + background: @brand-bg;
48 + text-decoration: none;
49 +
50 + .menu-icon {
51 + color: @brand-strong;
52 + background: fade(@brand, 14%);
53 + border-color: fade(@brand, 28%);
54 + }
55 +
56 + strong {
57 + color: @brand-strong;
58 + }
59 +
60 + small {
61 + color: @muted;
62 + }
63 + }
64 + }
65 +
66 + .divider {
67 + margin: 8px 0;
68 + background-color: @line;
69 + }
70 +
71 + .menu-icon {
72 + width: 34px;
73 + height: 34px;
74 + border-radius: 50%;
75 + background: fade(@brand, 8%);
76 + border: 1px solid fade(@brand, 18%);
77 + color: @brand;
78 + display: flex;
79 + align-items: center;
80 + justify-content: center;
81 + flex-shrink: 0;
82 + transition: color .15s ease, background .15s ease, border-color .15s ease;
83 + }
84 +
85 + .menu-text {
86 + display: flex;
87 + flex-direction: column;
88 + line-height: 1.25;
89 +
90 + strong {
91 + color: @text;
92 + font-size: 14px;
93 + font-weight: 600;
94 + }
95 +
96 + small {
97 + color: @muted;
98 + font-size: 12px;
99 + margin-top: 2px;
100 + font-weight: 400;
101 + }
102 + }
103 +}
104 +
105 +@media (max-width: 767px) {
106 + .agnease-services-dropdown {
107 + min-width: 0;
108 + width: 100%;
109 + padding: 6px;
110 + border-radius: 0;
111 + box-shadow: none;
112 +
113 + > li > a {
114 + padding: 10px;
115 + }
116 + }
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 +}
130 +
131 +/* ========== Mobile Services Menu ========== */
132 +
133 +@media (max-width: 767px) {
134 + .navbar-nav > li.agnease-services-menu {
135 + position: static;
136 + }
137 +
138 + .navbar-nav > li.agnease-services-menu > a,
139 + .navbar-nav > li.agnease-services-menu > a:hover,
140 + .navbar-nav > li.agnease-services-menu > a:focus,
141 + .navbar-nav > li.agnease-services-menu.open > a,
142 + .navbar-nav > li.agnease-services-menu.open > a:hover,
143 + .navbar-nav > li.agnease-services-menu.open > a:focus {
144 + background: transparent;
145 + background-color: transparent;
146 + box-shadow: none;
147 + }
148 +
149 + .navbar-nav > li.agnease-services-menu.open > .agnease-services-dropdown {
150 + display: grid;
151 + }
152 +
153 + .agnease-services-dropdown {
154 + left: 50% !important;
155 + right: auto !important;
156 + transform: translateX(-50%);
157 + width: calc(100vw - 32px);
158 + max-width: 460px;
159 + min-width: 0;
160 + max-height: calc(100vh - 190px);
161 + overflow-y: auto;
162 +
163 + grid-template-columns: repeat(2, minmax(0, 1fr));
164 + grid-gap: 8px;
165 +
166 + padding: 10px;
167 + margin-top: 8px;
168 + border-radius: 14px;
169 + border: 1px solid @line;
170 + box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
171 + background: #fff;
172 + }
173 +
174 + .agnease-services-dropdown > li {
175 + display: block;
176 + }
177 +
178 + .agnease-services-dropdown > li:first-child,
179 + .agnease-services-dropdown > li.divider {
180 + grid-column: 1 / -1;
181 + }
182 +
183 + .agnease-services-dropdown > li.divider {
184 + margin: 4px 0;
185 + }
186 +
187 + .agnease-services-dropdown > li > a {
188 + min-height: 92px;
189 + padding: 12px 10px;
190 + border-radius: 12px;
191 + flex-direction: column;
192 + align-items: center;
193 + justify-content: center;
194 + gap: 8px;
195 + text-align: center;
196 + }
197 +
198 + .agnease-services-dropdown .menu-icon {
199 + width: 34px;
200 + height: 34px;
201 + font-size: 15px;
202 + }
203 +
204 + .agnease-services-dropdown .menu-text {
205 + align-items: center;
206 + line-height: 1.2;
207 + }
208 +
209 + .agnease-services-dropdown .menu-text strong {
210 + font-size: 13px;
211 + font-weight: 600;
212 + }
213 +
214 + .agnease-services-dropdown .menu-text small {
215 + display: none;
216 + }
217 +}
contentType
... ... @@ -1,0 +1,1 @@
1 +LESS
name
... ... @@ -1,0 +1,1 @@
1 +Menu
use
... ... @@ -1,0 +1,1 @@
1 +onDemand