Changes for page Public Web Site
Last modified by Agnease on 2026/07/07 14:40
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -576,24 +576,106 @@ 576 576 577 577 .split-grid { 578 578 display: grid; 579 - grid-template-columns: 1.1fr .9fr;579 + grid-template-columns: .95fr 1.05fr; 580 580 grid-gap: 36px; 581 581 max-width: 1040px; 582 582 margin: 0 auto; 583 - align-items: center;583 + align-items: stretch; 584 584 } 585 585 586 586 .split-copy { 587 + position: relative; 588 + overflow: hidden; 589 + min-height: 100%; 590 + padding: 42px 38px; 591 + border-radius: 26px; 592 + background: 593 + radial-gradient(circle at 86% 12%, fade(@brand, 22%) 0%, transparent 32%), 594 + linear-gradient(135deg, @text 0%, @text-soft 100%); 595 + color: #fff; 596 + box-shadow: @shadow; 597 + 598 + &::before { 599 + content: ""; 600 + position: absolute; 601 + inset: 0; 602 + background: 603 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 604 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 605 + background-size: 48px 48px; 606 + opacity: .36; 607 + pointer-events: none; 608 + } 609 + 610 + h2, 611 + p { 612 + position: relative; 613 + z-index: 1; 614 + } 615 + 587 587 h2 { 588 588 text-align: left; 589 - margin-top: 0; 618 + margin: 0 0 18px; 619 + color: #fff; 620 + font-size: 30px; 621 + line-height: 1.18; 622 + letter-spacing: -.02em; 590 590 } 591 591 592 592 p { 593 - color: @muted; 594 - line-height: 1.6; 626 + margin: 0 0 18px; 627 + color: #DBE4EF; 628 + line-height: 1.65; 629 + 630 + &:last-child { 631 + margin-bottom: 0; 632 + } 595 595 } 634 + .split-copy { 635 + h3, 636 + h4 { 637 + position: relative; 638 + z-index: 1; 639 + margin: 0 0 16px; 640 + color: #fff; 641 + font-size: 24px; 642 + line-height: 1.2; 643 + font-weight: 800; 644 + } 645 + 646 + h2 i, 647 + h3 i, 648 + h4 i { 649 + margin-right: 8px; 650 + color: @brand; 651 + } 652 + 653 + ul { 654 + position: relative; 655 + z-index: 1; 656 + margin: 18px 0 0; 657 + padding: 0; 658 + list-style: none; 659 + } 660 + 661 + li { 662 + position: relative; 663 + margin: 10px 0; 664 + padding-left: 28px; 665 + color: #DBE4EF; 666 + line-height: 1.5; 667 + 668 + &::before { 669 + content: "\f00c"; 670 + font-family: FontAwesome; 671 + position: absolute; 672 + left: 0; 673 + top: 1px; 674 + color: @brand; 675 + } 676 + } 596 596 } 678 +} 597 597 598 598 .process-list { 599 599 counter-reset: process; ... ... @@ -604,34 +604,43 @@ 604 604 li { 605 605 counter-increment: process; 606 606 position: relative; 607 - padding: 16px 16px 16px 58px; 608 - margin-bottom: 12px; 689 + min-height: 104px; 690 + padding: 24px 26px 24px 82px; 691 + margin-bottom: 18px; 609 609 border: 1px solid @line; 610 610 border-radius: @radius; 694 + background: #fff; 611 611 box-shadow: @shadow-sm; 612 612 color: @muted; 613 613 line-height: 1.5; 614 614 699 + &:last-child { 700 + margin-bottom: 0; 701 + } 702 + 615 615 &:before { 616 616 content: counter(process); 617 617 position: absolute; 618 - left: 16px;619 - top: 16px;620 - width: 28px;621 - height: 28px;706 + left: 26px; 707 + top: 26px; 708 + width: 38px; 709 + height: 38px; 622 622 border-radius: 50%; 623 - background: fade(@brand, 10%);624 - color: @brand;711 + background: @brand; 712 + color: #fff; 625 625 display: flex; 626 626 align-items: center; 627 627 justify-content: center; 628 628 font-weight: 800; 717 + box-shadow: 0 0 0 8px fade(@brand, 10%); 629 629 } 630 630 631 631 strong { 632 632 display: block; 633 633 color: @text; 634 - margin-bottom: 3px; 723 + margin-bottom: 5px; 724 + font-size: 16px; 725 + line-height: 1.3; 635 635 } 636 636 } 637 637 } ... ... @@ -828,8 +828,12 @@ 828 828 grid-template-columns: 1fr; 829 829 } 830 830 831 - .split-copy h2 { 832 - text-align: center; 922 + .split-copy { 923 + padding: 34px 28px; 924 + 925 + h2 { 926 + text-align: center; 927 + } 833 833 } 834 834 } 835 835 ... ... @@ -897,6 +897,22 @@ 897 897 padding: 20px; 898 898 } 899 899 995 + .split-copy { 996 + padding: 30px 22px; 997 + border-radius: 20px; 998 + } 999 + 1000 + .process-list li { 1001 + padding: 22px 20px 22px 68px; 1002 + 1003 + &:before { 1004 + left: 20px; 1005 + top: 22px; 1006 + width: 32px; 1007 + height: 32px; 1008 + } 1009 + } 1010 + 900 900 .services .service { 901 901 gap: 14px; 902 902 }