Skip to Content

Changes for page Public Web Site

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

Summary

Details

XWiki.StyleSheetExtension[0]
code
... ... @@ -234,4 +234,304 @@
234 234   a { color: @brand; }
235 235   }
236 236  }
237 +/* ========== Agnease Revamp Additions ========== */
237 237  
239 +@brand-soft: #E7FFF8;
240 +@brand-bg: #F4FCFA;
241 +
242 +.hero-kicker {
243 + display: inline-flex;
244 + align-items: center;
245 + gap: 8px;
246 + color: @brand;
247 + background: fade(@brand, 8%);
248 + border: 1px solid fade(@brand, 18%);
249 + border-radius: 999px;
250 + padding: 6px 12px;
251 + margin-bottom: 14px;
252 + font-size: 13px;
253 + font-weight: 700;
254 +}
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 +.hero-support {
270 + max-width: 760px;
271 + margin: 14px auto 0;
272 + color: @muted;
273 + line-height: 1.55;
274 +}
275 +
276 +.hero-actions {
277 + display: flex;
278 + gap: 12px;
279 + flex-wrap: wrap;
280 + justify-content: center;
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 +}
296 +
297 +.trust-strip {
298 + padding: 18px 0;
299 + border-top: 1px solid @line;
300 + border-bottom: 1px solid @line;
301 + background: #fff;
302 +
303 + ul {
304 + max-width: 920px;
305 + margin: 0 auto;
306 + padding: 0;
307 + list-style: none;
308 + display: flex;
309 + justify-content: center;
310 + gap: 22px;
311 + flex-wrap: wrap;
312 + color: @muted;
313 + font-size: 13px;
314 + }
315 +
316 + li {
317 + display: flex;
318 + align-items: center;
319 + gap: 7px;
320 + }
321 +
322 + i {
323 + color: @brand;
324 + }
325 +}
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 +}
335 +
336 +.pathways {
337 + display: grid;
338 + grid-template-columns: repeat(3, minmax(0, 1fr));
339 + grid-gap: 18px;
340 + max-width: 1040px;
341 + margin: 22px auto 0;
342 +}
343 +
344 +.pathway-card {
345 + background: #fff;
346 + border: 1px solid @line;
347 + border-radius: @radius;
348 + box-shadow: @shadow-sm;
349 + padding: 22px;
350 + display: flex;
351 + flex-direction: column;
352 + min-height: 100%;
353 +
354 + .pathway-icon {
355 + width: 46px;
356 + height: 46px;
357 + border-radius: 50%;
358 + display: flex;
359 + align-items: center;
360 + justify-content: center;
361 + color: @brand;
362 + background: fade(@brand, 10%);
363 + margin-bottom: 14px;
364 + font-size: 18px;
365 + }
366 +
367 + h3 {
368 + margin: 0 0 8px;
369 + color: @text;
370 + font-size: 20px;
371 + line-height: 1.25;
372 + }
373 +
374 + p {
375 + color: @muted;
376 + line-height: 1.55;
377 + margin: 0 0 14px;
378 + }
379 +
380 + ul {
381 + margin: 0 0 18px;
382 + padding-left: 18px;
383 + color: @muted;
384 + font-size: 13px;
385 + }
386 +
387 + li {
388 + margin: 5px 0;
389 + }
390 +
391 + .card-link {
392 + margin-top: auto;
393 +
394 + a {
395 + color: @brand;
396 + font-weight: 700;
397 + }
398 + }
399 +}
400 +
401 +.split-section {
402 + background:
403 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
404 +}
405 +
406 +.split-grid {
407 + display: grid;
408 + grid-template-columns: 1.1fr .9fr;
409 + grid-gap: 36px;
410 + max-width: 1040px;
411 + margin: 0 auto;
412 + align-items: center;
413 +}
414 +
415 +.split-copy {
416 + h2 {
417 + text-align: left;
418 + margin-top: 0;
419 + }
420 +
421 + p {
422 + color: @muted;
423 + line-height: 1.6;
424 + }
425 +}
426 +
427 +.process-list {
428 + counter-reset: process;
429 + margin: 0;
430 + padding: 0;
431 + list-style: none;
432 +}
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;
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 + }
461 +
462 + strong {
463 + display: block;
464 + color: @text;
465 + margin-bottom: 3px;
466 + }
467 +}
468 +
469 +.resource-strip {
470 + background: @brand-bg;
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;
478 + }
479 +
480 + .resource-card {
481 + background: #fff;
482 + border: 1px solid @line;
483 + border-radius: @radius;
484 + padding: 18px;
485 + box-shadow: @shadow-sm;
486 +
487 + h4 {
488 + margin: 0 0 6px;
489 + color: @text;
490 + }
491 +
492 + p {
493 + color: @muted;
494 + margin: 0 0 10px;
495 + line-height: 1.5;
496 + }
497 +
498 + a {
499 + color: @brand;
500 + font-weight: 700;
501 + }
502 + }
503 +}
504 +
505 +.cta-panel {
506 + max-width: 860px;
507 + margin: 0 auto;
508 + padding: 30px;
509 + border-radius: @radius;
510 + border: 1px solid fade(@brand, 20%);
511 + background:
512 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
513 + box-shadow: @shadow-sm;
514 + text-align: center;
515 +
516 + h2 {
517 + margin-top: 0;
518 + }
519 +
520 + p {
521 + color: @muted;
522 + line-height: 1.55;
523 + }
524 +}
525 +
526 +@media (max-width: 900px) {
527 + .pathways,
528 + .split-grid,
529 + .resource-strip .resource-grid {
530 + grid-template-columns: 1fr;
531 + }
532 +
533 + .split-copy h2 {
534 + text-align: center;
535 + }
536 +}
537 +