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.27
edited by Agnease
on 2026/05/12 11:59
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[0]
code
... ... @@ -234,304 +234,4 @@
234 234   a { color: @brand; }
235 235   }
236 236  }
237 -/* ========== Agnease Revamp Additions ========== */
238 238  
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 -