Changes for page Public Web Site
Last modified by Alex Cotiuga on 2026/07/27 04:27
From version 31.3
edited by Alex Cotiuga
on 2026/07/27 04:17
on 2026/07/27 04:17
Change comment:
There is no comment for this version
To version 20.5
edited by Alex Cotiuga
on 2026/05/30 16:18
on 2026/05/30 16:18
Change comment:
There is no comment for this version
Summary
-
Page properties (3 modified, 0 added, 0 removed)
-
Attachments (0 modified, 0 added, 1 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Default language
-
... ... @@ -1,0 +1,1 @@ 1 +en - Hidden
-
... ... @@ -1,1 +1,1 @@ 1 - true1 +false - Content
-
... ... @@ -2,45 +2,7 @@ 2 2 #macro (displayPublicContent) 3 3 #set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome')) 4 4 {{html clean="false"}} 5 - <section class="hero hero-saas" id="top"> 6 - <div class="container"> 7 - <div class="hero-layout"> 8 - <div class="hero-copy"> 9 - <h1>Professional XWiki consulting <span>and engineering</span></h1> 10 10 11 - <p class="lead"> 12 - Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care. 13 - </p> 14 - 15 - <ul class="benefits"> 16 - <li>XWiki LTS upgrades</li> 17 - <li>Maintenance and support</li> 18 - <li>Custom XWiki development</li> 19 - <li>Migrations and integrations</li> 20 - </ul> 21 - 22 - <div class="hero-actions" id="hero-cta"> 23 - <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06"> 24 - Book a free discussion 25 - </a> 26 - <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a> 27 - </div> 28 - </div> 29 - 30 - <div class="hero-image-wrapper"> 31 - <img 32 - class="hero-image" 33 - src="$xwiki.getDocument('PublicWebSite.WebHome').getAttachmentURL('agnease-xwiki-hero.png')" 34 - alt="Illustration of a professional XWiki platform dashboard with upgrade, security and maintenance elements" 35 - width="1200" 36 - height="900" 37 - loading="eager" 38 - /> 39 - </div> 40 - </div> 41 - </div> 42 - </section> 43 -#* 44 44 <section class="hero hero-centered" aria-labelledby="hero-title"> 45 45 <div class="container hero-inner"> 46 46 <h1 id="hero-title">Professional XWiki consulting and engineering</h1> ... ... @@ -64,7 +64,7 @@ 64 64 </div> 65 65 </div> 66 66 </section> 67 - *#29 + 68 68 <section class="trust-strip" aria-label="Agnease experience"> 69 69 <div class="container"> 70 70 <ul> ... ... @@ -186,11 +186,10 @@ 186 186 <h2 id="why-title">Why work with an XWiki specialist</h2> 187 187 <p> 188 188 XWiki projects often involve more than pages. Production platforms may include custom code, 189 - extensions, authentication, permissions, workflows, integrations, compliance documentation 190 - and business-critical knowledge. 151 + extensions, authentication, permissions, workflows, integrations and business-critical content. 191 191 </p> 192 192 <p> 193 - Agnease brings 11+ years of hands-on XWiki experience to help reduce risk, supportlong-termreliability154 + Agnease brings 11+ years of hands-on XWiki experience to help reduce risk, deliver practical improvements 194 194 and leave the platform easier to maintain after the work is complete. 195 195 </p> 196 196 </div> ... ... @@ -249,7 +249,6 @@ 249 249 A short description is enough to define practical next steps. 250 250 </p> 251 251 <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Contact Agnease</a> 252 - <a class="btn btn-secondary" href="$xwiki.getURL('pricing.WebHome')">View service packages</a> 253 253 </div> 254 254 </div> 255 255 </section>
- agnease-xwiki-hero.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.Admin - Size
-
... ... @@ -1,1 +1,0 @@ 1 -981.8 KB - Content
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -1,5 +1,5 @@ 1 1 /* ========== Agnease Public Website ========== */ 2 - /*2 + 3 3 @brand: #00937D; 4 4 @brand-strong: #007B6A; 5 5 @brand-soft: #E7FFF8; ... ... @@ -11,19 +11,6 @@ 11 11 @shadow-sm: 0 6px 20px rgba(0, 0, 0, .06); 12 12 @shadow: 0 12px 36px rgba(0, 0, 0, .08); 13 13 @maxw: 1140px; 14 -*/ 15 -@brand: #00937D; 16 -@brand-strong: #007B6A; 17 -@brand-soft: #E7FFF8; 18 -@brand-bg: #F7F9FC; 19 -@text: #07182D; 20 -@text-soft: #10243D; 21 -@muted: #64748B; 22 -@line: #E6EBF2; 23 -@radius: 18px; 24 -@shadow-sm: 0 18px 45px rgba(15, 23, 42, .06); 25 -@shadow: 0 30px 80px rgba(15, 23, 42, .12); 26 -@maxw: 1140px; 27 27 28 28 @section-padding: 30px 0; 29 29 @section-padding-mobile: 28px 0; ... ... @@ -79,7 +79,7 @@ 79 79 80 80 .section-intro { 81 81 max-width: 760px; 82 - margin: 10pxauto 22px;69 + margin: 0 auto 22px; 83 83 text-align: center; 84 84 color: @muted; 85 85 font-size: 16px; ... ... @@ -150,7 +150,7 @@ 150 150 151 151 /* ========== Buttons ========== */ 152 152 153 - /*.btn-primary {140 +.btn-primary { 154 154 background: @brand; 155 155 border-color: @brand; 156 156 color: #fff; ... ... @@ -162,12 +162,18 @@ 162 162 color: #fff; 163 163 } 164 164 } 165 - */152 + 166 166 .btn-secondary { 167 - color: @ text;154 + color: @brand; 168 168 background: #fff; 169 - border: 1px solid fade(@ text, 35%);156 + border: 1px solid fade(@brand, 35%); 170 170 158 + &:hover, 159 + &:focus { 160 + color: @brand-strong; 161 + border-color: @brand; 162 + background: @brand-bg; 163 + } 171 171 } 172 172 173 173 /* ========== Hero ========== */ ... ... @@ -179,6 +179,9 @@ 179 179 180 180 &.hero-centered { 181 181 text-align: center; 175 + background: 176 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 177 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 182 182 display: flex; 183 183 align-items: center; 184 184 justify-content: center; ... ... @@ -252,6 +252,7 @@ 252 252 .trust-strip { 253 253 padding: 18px 0; 254 254 border-top: 1px solid @line; 251 + background: #fff; 255 255 256 256 ul { 257 257 max-width: 960px; ... ... @@ -324,6 +324,7 @@ 324 324 .pathway-card, 325 325 .service-card, 326 326 .resource-card { 324 + background: #fff; 327 327 border: 1px solid @line; 328 328 border-radius: @radius; 329 329 box-shadow: @shadow-sm; ... ... @@ -455,7 +455,6 @@ 455 455 456 456 .section-intro { 457 457 margin-bottom: 20px; 458 - max-width: 820px; 459 459 } 460 460 461 461 .industry-tags { ... ... @@ -519,6 +519,7 @@ 519 519 align-items: flex-start; 520 520 gap: 16px; 521 521 padding: 22px; 519 + background: #fff; 522 522 border: 1px solid @line; 523 523 border-radius: @radius; 524 524 box-shadow: @shadow-sm; ... ... @@ -576,104 +576,23 @@ 576 576 577 577 .split-grid { 578 578 display: grid; 579 - grid-template-columns: . 95fr1.05fr;577 + grid-template-columns: 1.1fr .9fr; 580 580 grid-gap: 36px; 581 581 max-width: 1040px; 582 582 margin: 0 auto; 583 - align-items: stretch;581 + align-items: center; 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 - 616 616 h2 { 617 617 text-align: left; 618 - margin: 0 0 18px; 619 - color: #fff; 620 - font-size: 30px; 621 - line-height: 1.18; 622 - letter-spacing: -.02em; 587 + margin-top: 0; 623 623 } 624 624 625 625 p { 626 - margin: 0 0 18px; 627 - color: #DBE4EF; 628 - line-height: 1.65; 629 - 630 - &:last-child { 631 - margin-bottom: 0; 632 - } 591 + color: @muted; 592 + line-height: 1.6; 633 633 } 634 - 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 - } 677 677 } 678 678 679 679 .process-list { ... ... @@ -685,75 +685,39 @@ 685 685 li { 686 686 counter-increment: process; 687 687 position: relative; 688 - min-height: 104px;689 - padding: 24px26px 24px 82px;690 - margin-bottom:18px;605 + padding: 16px 16px 16px 58px; 606 + margin-bottom: 12px; 607 + background: #fff; 691 691 border: 1px solid @line; 692 692 border-radius: @radius; 693 - background: #fff; 694 694 box-shadow: @shadow-sm; 695 695 color: @muted; 696 696 line-height: 1.5; 697 697 698 - &:last-child { 699 - margin-bottom: 0; 700 - } 701 - 702 702 &:before { 703 703 content: counter(process); 704 704 position: absolute; 705 - left: 26px;706 - top: 26px;707 - width: 38px;708 - height: 38px;617 + left: 16px; 618 + top: 16px; 619 + width: 28px; 620 + height: 28px; 709 709 border-radius: 50%; 710 - background: @brand; 711 - color: #fff;622 + background: fade(@brand, 10%); 623 + color: @brand; 712 712 display: flex; 713 713 align-items: center; 714 714 justify-content: center; 715 715 font-weight: 800; 716 - box-shadow: 0 0 0 8px fade(@brand, 10%); 717 717 } 718 718 719 719 strong { 720 720 display: block; 721 721 color: @text; 722 - margin-bottom: 5px; 723 - font-size: 16px; 724 - line-height: 1.3; 633 + margin-bottom: 3px; 725 725 } 726 726 } 727 727 } 728 728 729 -/* ===== Contact page side panel ===== */ 730 - 731 -.contact-side-panel { 732 - padding-top: 10px; 733 -} 734 - 735 -.contact-help-panel { 736 - margin-bottom: 18px; 737 - padding: 30px 28px; 738 -} 739 - 740 -.contact-help-panel h2 { 741 - font-size: 24px; 742 -} 743 - 744 -.contact-process-list li { 745 - min-height: auto; 746 -} 747 - 748 -/* CSS for hidden field to identify requests filled by bots. */ 749 -.contact-hp-wrapper { 750 - position: absolute; 751 - left: -9999px; 752 - width: 1px; 753 - height: 1px; 754 - overflow: hidden; 755 -} 756 - 757 757 /* ========== Resources ========== */ 758 758 759 759 .resource-strip { ... ... @@ -761,7 +761,6 @@ 761 761 } 762 762 763 763 .resource-card { 764 - background-color: #fff; 765 765 padding: 20px; 766 766 767 767 h4 { ... ... @@ -857,7 +857,7 @@ 857 857 /* ========== CTA ========== */ 858 858 859 859 .cta-section { 860 - border:none;740 + padding: @section-padding; 861 861 862 862 .contact-inline { 863 863 margin: 0; ... ... @@ -867,72 +867,70 @@ 867 867 color: @brand; 868 868 } 869 869 } 750 +} 870 870 871 - .cta-panel { 872 - position: relative; 873 - overflow: hidden; 874 - max-width: 1040px; 875 - margin: 0 auto; 876 - padding: 48px 40px; 877 - border: 0; 878 - border-radius: 26px; 879 - background: 880 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%), 881 - linear-gradient(135deg, @text 0%, @text-soft 100%); 882 - color: #fff; 883 - box-shadow: @shadow; 884 - text-align: center; 752 +.cta-panel { 753 + max-width: 860px; 754 + margin: 0 auto; 755 + padding: 32px; 756 + border-radius: @radius; 757 + border: 1px solid fade(@brand, 20%); 758 + background: 759 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%); 760 + box-shadow: @shadow-sm; 761 + text-align: center; 885 885 886 - &::before { 887 - content: ""; 888 - position: absolute; 889 - inset: 0; 890 - background: 891 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px), 892 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px); 893 - background-size: 48px 48px; 894 - opacity: .4; 895 - pointer-events: none; 896 - } 763 + h2 { 764 + margin-top: 0; 765 + } 897 897 898 - > h2, 899 - > p, 900 - > form, 901 - > .hero-actions, 902 - > .cta-actions, 903 - > .reviewNotifications { 904 - position: relative; 905 - z-index: 1; 906 - } 767 + p { 768 + color: @muted; 769 + line-height: 1.55; 770 + } 771 +} 907 907 908 - > h2 { 909 - max-width: 760px; 910 - margin: 0 auto 16px; 911 - color: #fff; 912 - } 773 +.resource-inline-cta { 774 + display: flex; 775 + align-items: center; 776 + justify-content: space-between; 777 + gap: 22px; 778 + margin: 30px 0; 779 + padding: 20px 22px; 780 + border: 1px solid fade(@brand, 22%); 781 + border-radius: @radius; 782 + background: @brand-bg; 783 + box-shadow: @shadow-sm; 913 913 914 - > p { 915 - max-width: 760px; 916 - margin: 0 auto 28px; 917 - color: #DBE4EF; 918 - font-size: 16px; 919 - line-height: 1.6; 920 - } 785 + p { 786 + margin: 0; 787 + color: @muted; 788 + line-height: 1.55; 789 + } 921 921 922 - .btn-primary { 923 - border-color: #fff; 924 - background: #fff; 925 - color: @text; 926 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18); 791 + strong { 792 + color: @text; 793 + } 927 927 928 - &:hover, 929 - &:focus { 930 - border-color: #fff; 931 - background: #fff; 932 - color: @brand-strong; 933 - text-decoration: none; 934 - } 795 + .btn { 796 + flex-shrink: 0; 797 + } 798 +} 799 + 800 +@media (max-width: 767px) { 801 + .resource-inline-cta { 802 + display: block; 803 + text-align: center; 804 + 805 + p { 806 + margin-bottom: 14px; 935 935 } 808 + 809 + .btn { 810 + display: inline-block; 811 + margin-left: auto; 812 + margin-right: auto; 813 + } 936 936 } 937 937 } 938 938 ... ... @@ -950,95 +950,11 @@ 950 950 grid-template-columns: 1fr; 951 951 } 952 952 953 - .split-copy { 954 - padding: 34px 28px; 955 - 956 - h2 { 957 - text-align: center; 958 - } 831 + .split-copy h2 { 832 + text-align: center; 959 959 } 960 960 } 961 961 962 -/* ========== XWiki notifications inside public CTA panels ========== */ 963 - 964 -#mainContentArea { 965 - .cta-panel { 966 - .reviewNotifications { 967 - position: relative; 968 - z-index: 1; 969 - max-width: 920px; 970 - margin: 22px auto 0; 971 - text-align: left; 972 - 973 - .box { 974 - margin: 0; 975 - padding: 18px 22px; 976 - border-radius: 8px; 977 - 978 - p { 979 - max-width: none; 980 - margin: 0; 981 - font-size: 15px; 982 - line-height: 1.55; 983 - font-weight: 600; 984 - } 985 - } 986 - 987 - .successmessage { 988 - border-color: #D6E9C6; 989 - border-left: 4px solid #3C763D; 990 - background: #DFF0D8; 991 - color: #3C763D; 992 - 993 - p, 994 - .fa, 995 - .icon { 996 - color: #3C763D; 997 - } 998 - } 999 - 1000 - .errormessage { 1001 - border-color: #EBCCD1; 1002 - border-left: 4px solid #A94442; 1003 - background: #F2DEDE; 1004 - color: #A94442; 1005 - 1006 - p, 1007 - .fa, 1008 - .icon { 1009 - color: #A94442; 1010 - } 1011 - } 1012 - 1013 - .warningmessage { 1014 - border-color: #FAEBCC; 1015 - border-left: 4px solid #8A6D3B; 1016 - background: #FCF8E3; 1017 - color: #8A6D3B; 1018 - 1019 - p, 1020 - .fa, 1021 - .icon { 1022 - color: #8A6D3B; 1023 - } 1024 - } 1025 - 1026 - .infomessage { 1027 - border-color: #BCE8F1; 1028 - border-left: 4px solid #31708F; 1029 - background: #D9EDF7; 1030 - color: #31708F; 1031 - 1032 - p, 1033 - .fa, 1034 - .icon { 1035 - color: #31708F; 1036 - } 1037 - } 1038 - } 1039 - } 1040 -} 1041 - 1042 1042 @media (max-width: 760px) { 1043 1043 section[id] { 1044 1044 scroll-margin-top: 132px; ... ... @@ -1103,35 +1103,12 @@ 1103 1103 padding: 20px; 1104 1104 } 1105 1105 1106 - .split-copy { 1107 - padding: 30px 22px; 1108 - border-radius: 20px; 1109 - } 1110 - 1111 - .process-list li { 1112 - padding: 22px 20px 22px 68px; 1113 - 1114 - &:before { 1115 - left: 20px; 1116 - top: 22px; 1117 - width: 32px; 1118 - height: 32px; 1119 - } 1120 - } 1121 - 1122 1122 .services .service { 1123 1123 gap: 14px; 1124 1124 } 1125 1125 1126 - .cta-section { 1127 - .cta-panel { 1128 - padding: 30px 22px; 1129 - border-radius: 20px; 1130 - 1131 - .btn-primary { 1132 - width: 100%; 1133 - } 1134 - } 904 + .cta-panel { 905 + padding: 24px 20px; 1135 1135 } 1136 1136 } 1137 1137 ... ... @@ -1144,6 +1144,9 @@ 1144 1144 .resource-header { 1145 1145 padding: @section-padding; 1146 1146 border-top: none; 918 + background: 919 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 920 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 1147 1147 1148 1148 h1 { 1149 1149 margin: 0 auto 14px; ... ... @@ -1211,7 +1211,7 @@ 1211 1211 1212 1212 .resource-note { 1213 1213 border-left: 4px solid @brand; 1214 - background: #fff;988 + background: @brand-bg; 1215 1215 padding: 16px 18px; 1216 1216 margin: 22px 0; 1217 1217 border-radius: 0 @radius @radius 0; ... ... @@ -1221,45 +1221,6 @@ 1221 1221 } 1222 1222 } 1223 1223 1224 -.resource-note.related-resources { 1225 - p { 1226 - margin-bottom: 10px; 1227 - } 1228 - 1229 - ul { 1230 - margin: 0; 1231 - padding-left: 20px; 1232 - } 1233 - 1234 - li { 1235 - margin: 6px 0; 1236 - color: @muted; 1237 - } 1238 -} 1239 - 1240 -.resource-faq-item { 1241 - display: flow-root; 1242 - border-bottom: 1px solid @line; 1243 - padding: 12px 0; 1244 - 1245 - summary { 1246 - cursor: pointer; 1247 - font-weight: 700; 1248 - color: @text; 1249 - line-height: 1.4; 1250 - } 1251 - 1252 - summary:hover, 1253 - summary:focus { 1254 - color: @brand-strong; 1255 - } 1256 - 1257 - p { 1258 - margin: 10px 0 4px; 1259 - color: @muted; 1260 - } 1261 -} 1262 - 1263 1263 .resource-checklist { 1264 1264 margin: 18px 0 24px; 1265 1265 padding: 0; ... ... @@ -1291,6 +1291,7 @@ 1291 1291 border: 1px solid @line; 1292 1292 border-radius: @radius; 1293 1293 padding: 18px; 1029 + background: #fff; 1294 1294 box-shadow: @shadow-sm; 1295 1295 1296 1296 h4 { ... ... @@ -1343,43 +1343,9 @@ 1343 1343 } 1344 1344 } 1345 1345 1346 -.resource-inline-cta { 1347 - display: flex; 1348 - align-items: center; 1349 - justify-content: space-between; 1350 - gap: 22px; 1351 - margin: 30px 0; 1352 - padding: 20px 22px; 1353 - border: 1px solid @line; 1354 - border-left: 4px solid @brand; 1355 - border-radius: @radius; 1356 - background: #fff; 1357 - box-shadow: @shadow-sm; 1358 - 1359 - p { 1360 - margin: 0; 1361 - color: @muted; 1362 - line-height: 1.55; 1363 - } 1364 - 1365 - strong { 1366 - display: block; 1367 - margin-bottom: 4px; 1368 - color: @text; 1369 - font-size: 17px; 1370 - line-height: 1.3; 1371 - } 1372 - 1373 - .btn { 1374 - flex-shrink: 0; 1375 - white-space: nowrap; 1376 - } 1377 -} 1378 - 1379 1379 .resource-note, 1380 1380 .resource-checklist, 1381 -.resource-cta, 1382 -.resource-inline-cta { 1084 +.resource-cta { 1383 1383 display: flow-root; 1384 1384 } 1385 1385 ... ... @@ -1389,22 +1389,6 @@ 1389 1389 } 1390 1390 } 1391 1391 1392 -@media (max-width: 767px) { 1393 - .resource-inline-cta { 1394 - display: block; 1395 - 1396 - p { 1397 - margin-bottom: 14px; 1398 - } 1399 - 1400 - .btn { 1401 - display: block; 1402 - width: 100%; 1403 - white-space: normal; 1404 - } 1405 - } 1406 -} 1407 - 1408 1408 @media (max-width: 900px) { 1409 1409 .resource-layout { 1410 1410 padding-top: 22px; ... ... @@ -1430,39 +1430,30 @@ 1430 1430 } 1431 1431 1432 1432 .product-card-grid { 1433 - max-width: 980px;1434 - margin: 2 6px auto 0;1119 + max-width: 840px; 1120 + margin: 22px auto 0; 1435 1435 display: grid; 1436 1436 grid-template-columns: 1fr; 1437 - grid-gap: 22px;1123 + grid-gap: 18px; 1438 1438 } 1439 1439 1440 1440 .product-card { 1441 - position:relative;1127 + background: #fff; 1442 1442 border: 1px solid @line; 1443 1443 border-radius: @radius; 1444 1444 box-shadow: @shadow-sm; 1445 - padding: 32px;1131 + padding: 28px; 1446 1446 display: grid; 1447 - grid-template-columns: 70px 1fr;1448 - grid-gap: 2 4px;1133 + grid-template-columns: 68px 1fr; 1134 + grid-gap: 22px; 1449 1449 align-items: start; 1450 - overflow: hidden; 1451 1451 1452 - &:before { 1453 - content: ""; 1454 - position: absolute; 1455 - inset: 0 auto 0 0; 1456 - width: 5px; 1457 - background: linear-gradient(180deg, @brand 0%, @brand-strong 100%); 1458 - } 1459 - 1460 1460 .product-card-icon { 1461 1461 width: 58px; 1462 1462 height: 58px; 1463 1463 border-radius: 50%; 1464 1464 background: fade(@brand, 10%); 1465 - border: 1px solid fade(@brand, 2 2%);1142 + border: 1px solid fade(@brand, 20%); 1466 1466 color: @brand; 1467 1467 display: flex; 1468 1468 align-items: center; ... ... @@ -1471,15 +1471,11 @@ 1471 1471 flex-shrink: 0; 1472 1472 } 1473 1473 1474 - .product-card-body { 1475 - min-width: 0; 1476 - } 1477 - 1478 1478 h3 { 1479 1479 margin: 0 0 10px; 1480 1480 color: @text; 1481 - font-size: 2 5px;1482 - line-height: 1.2 2;1154 + font-size: 23px; 1155 + line-height: 1.25; 1483 1483 font-weight: 800; 1484 1484 } 1485 1485 ... ... @@ -1488,36 +1488,25 @@ 1488 1488 line-height: 1.6; 1489 1489 } 1490 1490 1491 - .product-card-description { 1492 - max-width: 760px; 1493 - margin: 0 0 14px; 1494 - font-size: 16px; 1164 + .card-link { 1165 + margin: 0; 1166 + 1167 + a { 1168 + font-weight: 700; 1169 + } 1495 1495 } 1496 1496 } 1497 1497 1498 1498 .product-card-kicker { 1499 - display: inline-flex; 1500 - align-items: center; 1501 - gap: 7px; 1502 - width: fit-content; 1503 1503 margin-bottom: 10px; 1504 1504 padding: 5px 10px; 1505 - border: 1px solid fade(@brand, 24%); 1506 - border-radius: 999px; 1507 - background: fade(@brand, 8%); 1508 - color: @brand-strong; 1509 1509 font-size: 12px; 1510 - font-weight: 800; 1511 1511 text-transform: uppercase; 1512 1512 letter-spacing: .04em; 1513 - 1514 - i { 1515 - color: @brand; 1516 - } 1517 1517 } 1518 1518 1519 1519 .product-highlights { 1520 - margin: 14px 0 2 2px;1182 + margin: 14px 0 20px; 1521 1521 padding-left: 18px; 1522 1522 color: @muted; 1523 1523 ... ... @@ -1527,47 +1527,12 @@ 1527 1527 } 1528 1528 } 1529 1529 1530 -.product-card-actions { 1531 - display: flex; 1532 - align-items: center; 1533 - gap: 16px; 1534 - flex-wrap: wrap; 1535 - 1536 - .btn { 1537 - font-weight: 700; 1538 - } 1539 -} 1540 - 1541 -@media (max-width: 640px) { 1542 - .product-card { 1543 - grid-template-columns: 1fr; 1544 - padding: 26px 22px; 1545 - text-align: left; 1546 - 1547 - &:before { 1548 - width: 4px; 1549 - } 1550 - 1551 - .product-card-icon { 1552 - margin-bottom: 2px; 1553 - } 1554 - 1555 - h3 { 1556 - font-size: 22px; 1557 - } 1558 - } 1559 - 1560 - .product-card-actions { 1561 - gap: 12px; 1562 - } 1563 -} 1564 - 1565 1565 /* ========== Individual Product Pages ========== */ 1566 1566 1567 1567 .product-layout { 1568 1568 display: grid; 1569 - grid-template-columns: minmax(0,1.12fr)minmax(280px,.88fr);1570 - grid-gap: 3 2px;1196 + grid-template-columns: 1.1fr .9fr; 1197 + grid-gap: 36px; 1571 1571 max-width: 1040px; 1572 1572 margin: 0 auto; 1573 1573 align-items: start; ... ... @@ -1575,8 +1575,8 @@ 1575 1575 1576 1576 .product-summary-card, 1577 1577 .product-info-card, 1578 -.product-feature, 1579 1579 .product-gallery-panel { 1206 + background: #fff; 1580 1580 border: 1px solid @line; 1581 1581 border-radius: @radius; 1582 1582 box-shadow: @shadow-sm; ... ... @@ -1583,18 +1583,16 @@ 1583 1583 } 1584 1584 1585 1585 .product-summary-card { 1586 - padding: 2 8px;1213 + padding: 26px; 1587 1587 1588 1588 h2 { 1589 1589 text-align: left; 1590 1590 margin-top: 0; 1591 - margin-bottom: 14px; 1592 - line-height: 1.25; 1593 1593 } 1594 1594 1595 1595 p { 1596 1596 color: @muted; 1597 - line-height: 1.6 2;1222 + line-height: 1.6; 1598 1598 } 1599 1599 1600 1600 p:last-child { ... ... @@ -1603,19 +1603,13 @@ 1603 1603 } 1604 1604 1605 1605 .product-info-card { 1606 - padding: 2 4px;1231 + padding: 22px; 1607 1607 1608 1608 h3 { 1609 1609 margin-top: 0; 1610 1610 margin-bottom: 12px; 1611 - line-height: 1.3; 1612 1612 } 1613 1613 1614 - p { 1615 - color: @muted; 1616 - line-height: 1.55; 1617 - } 1618 - 1619 1619 ul { 1620 1620 margin: 0; 1621 1621 padding-left: 20px; ... ... @@ -1624,30 +1624,25 @@ 1624 1624 1625 1625 li { 1626 1626 margin: 8px 0; 1627 - line-height: 1. 3;1246 + line-height: 1.45; 1628 1628 } 1629 1629 } 1630 1630 1631 -.product-card-note { 1632 - margin: 0 0 14px; 1633 - color: @muted; 1634 - line-height: 1.55; 1635 -} 1636 - 1637 1637 .product-feature-grid { 1638 1638 display: grid; 1639 1639 grid-template-columns: repeat(3, minmax(0, 1fr)); 1640 - grid-gap: 20px;1253 + grid-gap: 18px; 1641 1641 max-width: 1040px; 1642 - margin: 2 4px auto 0;1255 + margin: 22px auto 0; 1643 1643 } 1644 1644 1645 1645 .product-feature { 1646 - padding: 24px; 1647 - min-width: 0; 1648 - min-height: 100%; 1259 + background: #fff; 1260 + border: 1px solid @line; 1261 + border-radius: @radius; 1262 + box-shadow: @shadow-sm; 1263 + padding: 22px; 1649 1649 1650 - .card-heading, 1651 1651 .feature-heading { 1652 1652 display: flex; 1653 1653 align-items: center; ... ... @@ -1678,56 +1678,10 @@ 1678 1678 p { 1679 1679 margin: 0; 1680 1680 color: @muted; 1681 - line-height: 1.5 2;1295 + line-height: 1.5; 1682 1682 } 1683 1683 } 1684 1684 1685 -.product-gallery-caption { 1686 - max-width: 820px; 1687 - margin: 12px auto 0; 1688 - color: @muted; 1689 - font-size: 14px; 1690 - line-height: 1.5; 1691 - text-align: center; 1692 -} 1693 - 1694 -/* Keep the default XWiki gallery style. 1695 - Only add spacing before it and center it. */ 1696 -.gallery.xGallery { 1697 - margin: 25px auto; 1698 - width: 920px; 1699 - height: 518px; 1700 -} 1701 - 1702 -.product-section-muted { 1703 - background: 1704 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1705 -} 1706 - 1707 -/* Compact process list when used inside a product card. */ 1708 -.product-summary-card .process-list { 1709 - margin-top: 16px; 1710 - 1711 - li { 1712 - padding: 13px 14px 13px 50px; 1713 - margin-bottom: 10px; 1714 - box-shadow: none; 1715 - } 1716 - 1717 - li:before { 1718 - left: 14px; 1719 - top: 14px; 1720 - width: 24px; 1721 - height: 24px; 1722 - font-size: 12px; 1723 - } 1724 - 1725 - strong { 1726 - margin-bottom: 2px; 1727 - } 1728 -} 1729 - 1730 -/* Kept for older product pages that still use a screenshot placeholder/panel. */ 1731 1731 .product-gallery-panel { 1732 1732 max-width: 1040px; 1733 1733 margin: 20px auto 0; ... ... @@ -1760,6 +1760,11 @@ 1760 1760 justify-content: center; 1761 1761 } 1762 1762 1331 +.product-section-muted { 1332 + background: 1333 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1334 +} 1335 + 1763 1763 @media (max-width: 980px) { 1764 1764 .product-layout, 1765 1765 .product-feature-grid { ... ... @@ -1788,37 +1788,12 @@ 1788 1788 .product-gallery-panel { 1789 1789 padding: 20px; 1790 1790 } 1791 - 1792 - .product-feature { 1793 - .card-heading, 1794 - .feature-heading { 1795 - gap: 12px; 1796 - } 1797 - 1798 - .feature-icon { 1799 - width: 42px; 1800 - height: 42px; 1801 - font-size: 16px; 1802 - } 1803 - } 1804 - 1805 - .gallery.xGallery { 1806 - margin-top: 22px !important; 1807 - } 1808 - 1809 - .product-gallery-caption { 1810 - margin-top: 10px; 1811 - padding: 0 14px; 1812 - } 1813 - 1814 - .product-summary-card .process-list li { 1815 - padding-left: 46px; 1816 - } 1817 1817 } 1818 1818 1819 1819 /* ========== Resources Index ========== */ 1820 1820 1821 1821 .resources-index-page { 1369 + background: #fff; 1822 1822 1823 1823 .services-grid { 1824 1824 grid-template-columns: repeat(2, minmax(0, 1fr)); ... ... @@ -1854,229 +1854,3 @@ 1854 1854 color: @muted; 1855 1855 } 1856 1856 } 1857 - 1858 -/* ========== Global Theme Background ========== */ 1859 - 1860 -html, 1861 -body { 1862 - min-height: 100%; 1863 -} 1864 - 1865 -body { 1866 - color: @text; 1867 - background: 1868 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%), 1869 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%), 1870 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important; 1871 - background-attachment: fixed; 1872 -} 1873 - 1874 -/* Let the body background show through the XWiki wrappers. 1875 -#mainContentArea, 1876 -.resource-page, 1877 -.resources-index-page { 1878 - background: transparent !important; 1879 - background-image: none !important; 1880 -} 1881 -*/ 1882 -/* Remove local decorative backgrounds that compete with the global gradient. 1883 -.hero, 1884 -.hero.hero-centered, 1885 -.trust-strip, 1886 -.industry-trust-section, 1887 -.split-section, 1888 -.resource-strip, 1889 -.homepage-resource-strip, 1890 -.resource-header, 1891 -.product-section-muted, 1892 -.resources-index-page { 1893 - background: transparent !important; 1894 - background-image: none !important; 1895 -} 1896 - */ 1897 -/* Keep large panels readable, but remove their inner gradients. 1898 -.industry-trust-section .industry-trust-panel, 1899 -.cta-panel, 1900 -.resource-inline-cta, 1901 -.resource-note, 1902 -.resource-cta { 1903 - background: #fff !important; 1904 - background-image: none !important; 1905 -} */ 1906 - 1907 -/* ========== Main Page Hero / SaaS Layout ========== */ 1908 - 1909 -#mainContentArea .hero.hero-saas { 1910 - min-height: auto; 1911 - padding: 60px 0 34px; 1912 - display: flex; 1913 - align-items: center; 1914 - overflow: hidden; 1915 - background: transparent; 1916 -} 1917 - 1918 -#mainContentArea .hero-layout { 1919 - max-width: 1120px; 1920 - margin: 0 auto; 1921 - display: grid; 1922 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); 1923 - gap: 56px; 1924 - align-items: center; 1925 -} 1926 - 1927 -#mainContentArea .hero-copy { 1928 - min-width: 0; 1929 - text-align: left; 1930 -} 1931 - 1932 -#mainContentArea .hero.hero-saas h1 { 1933 - max-width: 640px; 1934 - margin: 0 0 26px; 1935 - font-size: 60px; 1936 - font-weight: 800; 1937 - line-height: 1; 1938 - letter-spacing: -3px; 1939 -} 1940 - 1941 -#mainContentArea .hero.hero-saas h1 span { 1942 - color: @brand; 1943 -} 1944 - 1945 -#mainContentArea .hero.hero-saas .lead { 1946 - max-width: 590px; 1947 - margin: 0 0 28px; 1948 - color: #334155; 1949 - text-align: left; 1950 - font-size: 18px; 1951 - line-height: 1.6; 1952 -} 1953 - 1954 -#mainContentArea .hero.hero-saas .benefits { 1955 - max-width: 620px; 1956 - margin: 0 0 30px; 1957 - padding: 0; 1958 - display: grid; 1959 - grid-template-columns: repeat(2, minmax(0, 1fr)); 1960 - gap: 10px 24px; 1961 - list-style: none; 1962 - color: #475569; 1963 - font-size: 15px; 1964 - text-align: left; 1965 -} 1966 - 1967 -#mainContentArea .hero.hero-saas .benefits li { 1968 - display: grid; 1969 - grid-template-columns: 18px minmax(0, 1fr); 1970 - column-gap: 8px; 1971 - align-items: start; 1972 - margin: 0; 1973 - line-height: 1.45; 1974 -} 1975 - 1976 -#mainContentArea .hero.hero-saas .benefits li::before { 1977 - content: "✓"; 1978 - display: block; 1979 - width: 18px; 1980 - color: @brand; 1981 - font-weight: 900; 1982 - line-height: 1.45; 1983 - text-align: left; 1984 - margin: 0; 1985 -} 1986 - 1987 -#mainContentArea .hero.hero-saas .hero-actions, 1988 -#mainContentArea .hero.hero-saas #hero-cta { 1989 - display: flex; 1990 - flex-wrap: wrap; 1991 - justify-content: flex-start; 1992 - gap: 12px; 1993 - margin-top: 0; 1994 -} 1995 - 1996 -#mainContentArea .hero-image-wrapper { 1997 - min-width: 0; 1998 - display: flex; 1999 - justify-content: center; 2000 - align-items: center; 2001 -} 2002 - 2003 -#mainContentArea .hero-image { 2004 - display: block; 2005 - width: 100%; 2006 - max-width: 620px; 2007 - height: auto; 2008 - border: 0; 2009 -} 2010 - 2011 -/* ========== Main Page Hero Responsive ========== */ 2012 - 2013 -@media (max-width: 1100px) { 2014 - #mainContentArea .hero-layout { 2015 - max-width: 760px; 2016 - grid-template-columns: 1fr; 2017 - gap: 34px; 2018 - } 2019 - 2020 - #mainContentArea .hero-copy { 2021 - order: 1; 2022 - text-align: center; 2023 - } 2024 - 2025 - #mainContentArea .hero-image-wrapper { 2026 - order: 2; 2027 - } 2028 - 2029 - #mainContentArea .hero.hero-saas h1 { 2030 - margin-left: auto; 2031 - margin-right: auto; 2032 - text-align: center; 2033 - } 2034 - 2035 - #mainContentArea .hero.hero-saas .lead { 2036 - margin-left: auto; 2037 - margin-right: auto; 2038 - text-align: center; 2039 - } 2040 - 2041 - #mainContentArea .hero.hero-saas .benefits { 2042 - margin-left: auto; 2043 - margin-right: auto; 2044 - } 2045 - 2046 - #mainContentArea .hero.hero-saas .hero-actions, 2047 - #mainContentArea .hero.hero-saas #hero-cta { 2048 - justify-content: center; 2049 - } 2050 - 2051 - #mainContentArea .hero-image { 2052 - max-width: 620px; 2053 - } 2054 -} 2055 - 2056 -@media (max-width: 640px) { 2057 - #mainContentArea .hero.hero-saas { 2058 - padding: 42px 0 28px; 2059 - } 2060 - 2061 - #mainContentArea .hero-layout { 2062 - gap: 28px; 2063 - } 2064 - 2065 - #mainContentArea .hero.hero-saas h1 { 2066 - font-size: 42px; 2067 - letter-spacing: -1.5px; 2068 - } 2069 - 2070 - #mainContentArea .hero.hero-saas .lead { 2071 - font-size: 17px; 2072 - } 2073 - 2074 - #mainContentArea .hero.hero-saas .benefits { 2075 - grid-template-columns: 1fr; 2076 - } 2077 - 2078 - #mainContentArea .hero-image { 2079 - max-width: 100%; 2080 - } 2081 -} 2082 -