Changes for page Public Web Site

Last modified by Alex Cotiuga on 2026/07/27 04:27

From version 31.2
edited by Alex Cotiuga
on 2026/07/27 04:11
Change comment: There is no comment for this version
To version 20.9
edited by Alex Cotiuga
on 2026/05/30 16:24
Change comment: There is no comment for this version

Summary

Details

Page properties
Default language
... ... @@ -1,0 +1,1 @@
1 +en
Hidden
... ... @@ -1,1 +1,1 @@
1 -true
1 +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>
... ... @@ -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: 10px auto 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;
... ... @@ -519,6 +519,7 @@
519 519   align-items: flex-start;
520 520   gap: 16px;
521 521   padding: 22px;
520 + 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: .95fr 1.05fr;
578 + 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;
582 + 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;
588 + 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 - }
592 + color: @muted;
593 + 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: 24px 26px 24px 82px;
690 - margin-bottom: 18px;
606 + padding: 16px 16px 16px 58px;
607 + margin-bottom: 12px;
608 + 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;
618 + left: 16px;
619 + top: 16px;
620 + width: 28px;
621 + height: 28px;
709 709   border-radius: 50%;
710 - background: @brand;
711 - color: #fff;
623 + background: fade(@brand, 10%);
624 + 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;
634 + 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;
741 + padding: @section-padding;
861 861  
862 862   .contact-inline {
863 863   margin: 0;
... ... @@ -867,68 +867,69 @@
867 867   color: @brand;
868 868   }
869 869   }
751 +}
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;
753 +.cta-panel {
754 + max-width: 860px;
755 + margin: 0 auto;
756 + padding: 32px;
757 + border-radius: @radius;
758 + border: 1px solid fade(@brand, 20%);
759 + background:
760 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
761 + box-shadow: @shadow-sm;
762 + 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 - }
764 + h2 {
765 + margin-top: 0;
766 + }
897 897  
898 - h2,
899 - p,
900 - .btn {
901 - position: relative;
902 - z-index: 1;
903 - }
768 + p {
769 + color: @muted;
770 + line-height: 1.55;
771 + }
772 +}
904 904  
905 - h2 {
906 - max-width: 760px;
907 - margin: 0 auto 16px;
908 - color: #fff;
909 - }
774 +.resource-inline-cta {
775 + display: flex;
776 + align-items: center;
777 + justify-content: space-between;
778 + gap: 22px;
779 + margin: 30px 0;
780 + padding: 20px 22px;
781 + border: 1px solid fade(@brand, 22%);
782 + border-radius: @radius;
783 + background: @brand-bg;
784 + box-shadow: @shadow-sm;
910 910  
786 + p {
787 + margin: 0;
788 + color: @muted;
789 + line-height: 1.55;
790 + }
791 +
792 + strong {
793 + color: @text;
794 + }
795 +
796 + .btn {
797 + flex-shrink: 0;
798 + }
799 +}
800 +
801 +@media (max-width: 767px) {
802 + .resource-inline-cta {
803 + display: block;
804 + text-align: center;
805 +
911 911   p {
912 - max-width: 760px;
913 - margin: 0 auto 28px;
914 - color: #DBE4EF;
915 - font-size: 16px;
916 - line-height: 1.6;
807 + margin-bottom: 14px;
917 917   }
918 918  
919 - .btn-primary {
920 - border-color: #fff;
921 - background: #fff;
922 - color: @text;
923 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
924 -
925 - &:hover,
926 - &:focus {
927 - border-color: #fff;
928 - background: #fff;
929 - color: @brand-strong;
930 - text-decoration: none;
931 - }
810 + .btn {
811 + display: inline-block;
812 + margin-left: auto;
813 + margin-right: auto;
932 932   }
933 933   }
934 934  }
... ... @@ -947,95 +947,11 @@
947 947   grid-template-columns: 1fr;
948 948   }
949 949  
950 - .split-copy {
951 - padding: 34px 28px;
952 -
953 - h2 {
954 - text-align: center;
955 - }
832 + .split-copy h2 {
833 + text-align: center;
956 956   }
957 957  }
958 958  
959 -/* ========== XWiki notifications inside public CTA panels ========== */
960 -
961 -#mainContentArea {
962 - .cta-panel {
963 - .reviewNotifications {
964 - position: relative;
965 - z-index: 1;
966 - max-width: 920px;
967 - margin: 22px auto 0;
968 - text-align: left;
969 -
970 - .box {
971 - margin: 0;
972 - padding: 18px 22px;
973 - border-radius: 8px;
974 -
975 - p {
976 - max-width: none;
977 - margin: 0;
978 - font-size: 15px;
979 - line-height: 1.55;
980 - font-weight: 600;
981 - }
982 - }
983 -
984 - .successmessage {
985 - border-color: #D6E9C6;
986 - border-left: 4px solid #3C763D;
987 - background: #DFF0D8;
988 - color: #3C763D;
989 -
990 - p,
991 - .fa,
992 - .icon {
993 - color: #3C763D;
994 - }
995 - }
996 -
997 - .errormessage {
998 - border-color: #EBCCD1;
999 - border-left: 4px solid #A94442;
1000 - background: #F2DEDE;
1001 - color: #A94442;
1002 -
1003 - p,
1004 - .fa,
1005 - .icon {
1006 - color: #A94442;
1007 - }
1008 - }
1009 -
1010 - .warningmessage {
1011 - border-color: #FAEBCC;
1012 - border-left: 4px solid #8A6D3B;
1013 - background: #FCF8E3;
1014 - color: #8A6D3B;
1015 -
1016 - p,
1017 - .fa,
1018 - .icon {
1019 - color: #8A6D3B;
1020 - }
1021 - }
1022 -
1023 - .infomessage {
1024 - border-color: #BCE8F1;
1025 - border-left: 4px solid #31708F;
1026 - background: #D9EDF7;
1027 - color: #31708F;
1028 -
1029 - p,
1030 - .fa,
1031 - .icon {
1032 - color: #31708F;
1033 - }
1034 - }
1035 - }
1036 - }
1037 -}
1038 -
1039 1039  @media (max-width: 760px) {
1040 1040   section[id] {
1041 1041   scroll-margin-top: 132px;
... ... @@ -1100,35 +1100,12 @@
1100 1100   padding: 20px;
1101 1101   }
1102 1102  
1103 - .split-copy {
1104 - padding: 30px 22px;
1105 - border-radius: 20px;
1106 - }
1107 -
1108 - .process-list li {
1109 - padding: 22px 20px 22px 68px;
1110 -
1111 - &:before {
1112 - left: 20px;
1113 - top: 22px;
1114 - width: 32px;
1115 - height: 32px;
1116 - }
1117 - }
1118 -
1119 1119   .services .service {
1120 1120   gap: 14px;
1121 1121   }
1122 1122  
1123 - .cta-section {
1124 - .cta-panel {
1125 - padding: 30px 22px;
1126 - border-radius: 20px;
1127 -
1128 - .btn-primary {
1129 - width: 100%;
1130 - }
1131 - }
905 + .cta-panel {
906 + padding: 24px 20px;
1132 1132   }
1133 1133  }
1134 1134  
... ... @@ -1141,6 +1141,9 @@
1141 1141  .resource-header {
1142 1142   padding: @section-padding;
1143 1143   border-top: none;
919 + background:
920 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
921 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
1144 1144  
1145 1145   h1 {
1146 1146   margin: 0 auto 14px;
... ... @@ -1208,7 +1208,7 @@
1208 1208  
1209 1209  .resource-note {
1210 1210   border-left: 4px solid @brand;
1211 - background: #fff;
989 + background: @brand-bg;
1212 1212   padding: 16px 18px;
1213 1213   margin: 22px 0;
1214 1214   border-radius: 0 @radius @radius 0;
... ... @@ -1218,45 +1218,6 @@
1218 1218   }
1219 1219  }
1220 1220  
1221 -.resource-note.related-resources {
1222 - p {
1223 - margin-bottom: 10px;
1224 - }
1225 -
1226 - ul {
1227 - margin: 0;
1228 - padding-left: 20px;
1229 - }
1230 -
1231 - li {
1232 - margin: 6px 0;
1233 - color: @muted;
1234 - }
1235 -}
1236 -
1237 -.resource-faq-item {
1238 - display: flow-root;
1239 - border-bottom: 1px solid @line;
1240 - padding: 12px 0;
1241 -
1242 - summary {
1243 - cursor: pointer;
1244 - font-weight: 700;
1245 - color: @text;
1246 - line-height: 1.4;
1247 - }
1248 -
1249 - summary:hover,
1250 - summary:focus {
1251 - color: @brand-strong;
1252 - }
1253 -
1254 - p {
1255 - margin: 10px 0 4px;
1256 - color: @muted;
1257 - }
1258 -}
1259 -
1260 1260  .resource-checklist {
1261 1261   margin: 18px 0 24px;
1262 1262   padding: 0;
... ... @@ -1288,6 +1288,7 @@
1288 1288   border: 1px solid @line;
1289 1289   border-radius: @radius;
1290 1290   padding: 18px;
1030 + background: #fff;
1291 1291   box-shadow: @shadow-sm;
1292 1292  
1293 1293   h4 {
... ... @@ -1340,43 +1340,9 @@
1340 1340   }
1341 1341  }
1342 1342  
1343 -.resource-inline-cta {
1344 - display: flex;
1345 - align-items: center;
1346 - justify-content: space-between;
1347 - gap: 22px;
1348 - margin: 30px 0;
1349 - padding: 20px 22px;
1350 - border: 1px solid @line;
1351 - border-left: 4px solid @brand;
1352 - border-radius: @radius;
1353 - background: #fff;
1354 - box-shadow: @shadow-sm;
1355 -
1356 - p {
1357 - margin: 0;
1358 - color: @muted;
1359 - line-height: 1.55;
1360 - }
1361 -
1362 - strong {
1363 - display: block;
1364 - margin-bottom: 4px;
1365 - color: @text;
1366 - font-size: 17px;
1367 - line-height: 1.3;
1368 - }
1369 -
1370 - .btn {
1371 - flex-shrink: 0;
1372 - white-space: nowrap;
1373 - }
1374 -}
1375 -
1376 1376  .resource-note,
1377 1377  .resource-checklist,
1378 -.resource-cta,
1379 -.resource-inline-cta {
1085 +.resource-cta {
1380 1380   display: flow-root;
1381 1381  }
1382 1382  
... ... @@ -1386,22 +1386,6 @@
1386 1386   }
1387 1387  }
1388 1388  
1389 -@media (max-width: 767px) {
1390 - .resource-inline-cta {
1391 - display: block;
1392 -
1393 - p {
1394 - margin-bottom: 14px;
1395 - }
1396 -
1397 - .btn {
1398 - display: block;
1399 - width: 100%;
1400 - white-space: normal;
1401 - }
1402 - }
1403 -}
1404 -
1405 1405  @media (max-width: 900px) {
1406 1406   .resource-layout {
1407 1407   padding-top: 22px;
... ... @@ -1427,39 +1427,30 @@
1427 1427  }
1428 1428  
1429 1429  .product-card-grid {
1430 - max-width: 980px;
1431 - margin: 26px auto 0;
1120 + max-width: 840px;
1121 + margin: 22px auto 0;
1432 1432   display: grid;
1433 1433   grid-template-columns: 1fr;
1434 - grid-gap: 22px;
1124 + grid-gap: 18px;
1435 1435  }
1436 1436  
1437 1437  .product-card {
1438 - position: relative;
1128 + background: #fff;
1439 1439   border: 1px solid @line;
1440 1440   border-radius: @radius;
1441 1441   box-shadow: @shadow-sm;
1442 - padding: 32px;
1132 + padding: 28px;
1443 1443   display: grid;
1444 - grid-template-columns: 70px 1fr;
1445 - grid-gap: 24px;
1134 + grid-template-columns: 68px 1fr;
1135 + grid-gap: 22px;
1446 1446   align-items: start;
1447 - overflow: hidden;
1448 1448  
1449 - &:before {
1450 - content: "";
1451 - position: absolute;
1452 - inset: 0 auto 0 0;
1453 - width: 5px;
1454 - background: linear-gradient(180deg, @brand 0%, @brand-strong 100%);
1455 - }
1456 -
1457 1457   .product-card-icon {
1458 1458   width: 58px;
1459 1459   height: 58px;
1460 1460   border-radius: 50%;
1461 1461   background: fade(@brand, 10%);
1462 - border: 1px solid fade(@brand, 22%);
1143 + border: 1px solid fade(@brand, 20%);
1463 1463   color: @brand;
1464 1464   display: flex;
1465 1465   align-items: center;
... ... @@ -1468,15 +1468,11 @@
1468 1468   flex-shrink: 0;
1469 1469   }
1470 1470  
1471 - .product-card-body {
1472 - min-width: 0;
1473 - }
1474 -
1475 1475   h3 {
1476 1476   margin: 0 0 10px;
1477 1477   color: @text;
1478 - font-size: 25px;
1479 - line-height: 1.22;
1155 + font-size: 23px;
1156 + line-height: 1.25;
1480 1480   font-weight: 800;
1481 1481   }
1482 1482  
... ... @@ -1485,36 +1485,25 @@
1485 1485   line-height: 1.6;
1486 1486   }
1487 1487  
1488 - .product-card-description {
1489 - max-width: 760px;
1490 - margin: 0 0 14px;
1491 - font-size: 16px;
1165 + .card-link {
1166 + margin: 0;
1167 +
1168 + a {
1169 + font-weight: 700;
1170 + }
1492 1492   }
1493 1493  }
1494 1494  
1495 1495  .product-card-kicker {
1496 - display: inline-flex;
1497 - align-items: center;
1498 - gap: 7px;
1499 - width: fit-content;
1500 1500   margin-bottom: 10px;
1501 1501   padding: 5px 10px;
1502 - border: 1px solid fade(@brand, 24%);
1503 - border-radius: 999px;
1504 - background: fade(@brand, 8%);
1505 - color: @brand-strong;
1506 1506   font-size: 12px;
1507 - font-weight: 800;
1508 1508   text-transform: uppercase;
1509 1509   letter-spacing: .04em;
1510 -
1511 - i {
1512 - color: @brand;
1513 - }
1514 1514  }
1515 1515  
1516 1516  .product-highlights {
1517 - margin: 14px 0 22px;
1183 + margin: 14px 0 20px;
1518 1518   padding-left: 18px;
1519 1519   color: @muted;
1520 1520  
... ... @@ -1524,47 +1524,12 @@
1524 1524   }
1525 1525  }
1526 1526  
1527 -.product-card-actions {
1528 - display: flex;
1529 - align-items: center;
1530 - gap: 16px;
1531 - flex-wrap: wrap;
1532 -
1533 - .btn {
1534 - font-weight: 700;
1535 - }
1536 -}
1537 -
1538 -@media (max-width: 640px) {
1539 - .product-card {
1540 - grid-template-columns: 1fr;
1541 - padding: 26px 22px;
1542 - text-align: left;
1543 -
1544 - &:before {
1545 - width: 4px;
1546 - }
1547 -
1548 - .product-card-icon {
1549 - margin-bottom: 2px;
1550 - }
1551 -
1552 - h3 {
1553 - font-size: 22px;
1554 - }
1555 - }
1556 -
1557 - .product-card-actions {
1558 - gap: 12px;
1559 - }
1560 -}
1561 -
1562 1562  /* ========== Individual Product Pages ========== */
1563 1563  
1564 1564  .product-layout {
1565 1565   display: grid;
1566 - grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
1567 - grid-gap: 32px;
1197 + grid-template-columns: 1.1fr .9fr;
1198 + grid-gap: 36px;
1568 1568   max-width: 1040px;
1569 1569   margin: 0 auto;
1570 1570   align-items: start;
... ... @@ -1572,8 +1572,8 @@
1572 1572  
1573 1573  .product-summary-card,
1574 1574  .product-info-card,
1575 -.product-feature,
1576 1576  .product-gallery-panel {
1207 + background: #fff;
1577 1577   border: 1px solid @line;
1578 1578   border-radius: @radius;
1579 1579   box-shadow: @shadow-sm;
... ... @@ -1580,18 +1580,16 @@
1580 1580  }
1581 1581  
1582 1582  .product-summary-card {
1583 - padding: 28px;
1214 + padding: 26px;
1584 1584  
1585 1585   h2 {
1586 1586   text-align: left;
1587 1587   margin-top: 0;
1588 - margin-bottom: 14px;
1589 - line-height: 1.25;
1590 1590   }
1591 1591  
1592 1592   p {
1593 1593   color: @muted;
1594 - line-height: 1.62;
1223 + line-height: 1.6;
1595 1595   }
1596 1596  
1597 1597   p:last-child {
... ... @@ -1600,19 +1600,13 @@
1600 1600  }
1601 1601  
1602 1602  .product-info-card {
1603 - padding: 24px;
1232 + padding: 22px;
1604 1604  
1605 1605   h3 {
1606 1606   margin-top: 0;
1607 1607   margin-bottom: 12px;
1608 - line-height: 1.3;
1609 1609   }
1610 1610  
1611 - p {
1612 - color: @muted;
1613 - line-height: 1.55;
1614 - }
1615 -
1616 1616   ul {
1617 1617   margin: 0;
1618 1618   padding-left: 20px;
... ... @@ -1621,30 +1621,25 @@
1621 1621  
1622 1622   li {
1623 1623   margin: 8px 0;
1624 - line-height: 1.3;
1247 + line-height: 1.45;
1625 1625   }
1626 1626  }
1627 1627  
1628 -.product-card-note {
1629 - margin: 0 0 14px;
1630 - color: @muted;
1631 - line-height: 1.55;
1632 -}
1633 -
1634 1634  .product-feature-grid {
1635 1635   display: grid;
1636 1636   grid-template-columns: repeat(3, minmax(0, 1fr));
1637 - grid-gap: 20px;
1254 + grid-gap: 18px;
1638 1638   max-width: 1040px;
1639 - margin: 24px auto 0;
1256 + margin: 22px auto 0;
1640 1640  }
1641 1641  
1642 1642  .product-feature {
1643 - padding: 24px;
1644 - min-width: 0;
1645 - min-height: 100%;
1260 + background: #fff;
1261 + border: 1px solid @line;
1262 + border-radius: @radius;
1263 + box-shadow: @shadow-sm;
1264 + padding: 22px;
1646 1646  
1647 - .card-heading,
1648 1648   .feature-heading {
1649 1649   display: flex;
1650 1650   align-items: center;
... ... @@ -1675,56 +1675,10 @@
1675 1675   p {
1676 1676   margin: 0;
1677 1677   color: @muted;
1678 - line-height: 1.52;
1296 + line-height: 1.5;
1679 1679   }
1680 1680  }
1681 1681  
1682 -.product-gallery-caption {
1683 - max-width: 820px;
1684 - margin: 12px auto 0;
1685 - color: @muted;
1686 - font-size: 14px;
1687 - line-height: 1.5;
1688 - text-align: center;
1689 -}
1690 -
1691 -/* Keep the default XWiki gallery style.
1692 - Only add spacing before it and center it. */
1693 -.gallery.xGallery {
1694 - margin: 25px auto;
1695 - width: 920px;
1696 - height: 518px;
1697 -}
1698 -
1699 -.product-section-muted {
1700 - background:
1701 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1702 -}
1703 -
1704 -/* Compact process list when used inside a product card. */
1705 -.product-summary-card .process-list {
1706 - margin-top: 16px;
1707 -
1708 - li {
1709 - padding: 13px 14px 13px 50px;
1710 - margin-bottom: 10px;
1711 - box-shadow: none;
1712 - }
1713 -
1714 - li:before {
1715 - left: 14px;
1716 - top: 14px;
1717 - width: 24px;
1718 - height: 24px;
1719 - font-size: 12px;
1720 - }
1721 -
1722 - strong {
1723 - margin-bottom: 2px;
1724 - }
1725 -}
1726 -
1727 -/* Kept for older product pages that still use a screenshot placeholder/panel. */
1728 1728  .product-gallery-panel {
1729 1729   max-width: 1040px;
1730 1730   margin: 20px auto 0;
... ... @@ -1757,6 +1757,11 @@
1757 1757   justify-content: center;
1758 1758  }
1759 1759  
1332 +.product-section-muted {
1333 + background:
1334 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1335 +}
1336 +
1760 1760  @media (max-width: 980px) {
1761 1761   .product-layout,
1762 1762   .product-feature-grid {
... ... @@ -1785,37 +1785,12 @@
1785 1785   .product-gallery-panel {
1786 1786   padding: 20px;
1787 1787   }
1788 -
1789 - .product-feature {
1790 - .card-heading,
1791 - .feature-heading {
1792 - gap: 12px;
1793 - }
1794 -
1795 - .feature-icon {
1796 - width: 42px;
1797 - height: 42px;
1798 - font-size: 16px;
1799 - }
1800 - }
1801 -
1802 - .gallery.xGallery {
1803 - margin-top: 22px !important;
1804 - }
1805 -
1806 - .product-gallery-caption {
1807 - margin-top: 10px;
1808 - padding: 0 14px;
1809 - }
1810 -
1811 - .product-summary-card .process-list li {
1812 - padding-left: 46px;
1813 - }
1814 1814  }
1815 1815  
1816 1816  /* ========== Resources Index ========== */
1817 1817  
1818 1818  .resources-index-page {
1370 + background: #fff;
1819 1819  
1820 1820   .services-grid {
1821 1821   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1851,229 +1851,3 @@
1851 1851   color: @muted;
1852 1852   }
1853 1853  }
1854 -
1855 -/* ========== Global Theme Background ========== */
1856 -
1857 -html,
1858 -body {
1859 - min-height: 100%;
1860 -}
1861 -
1862 -body {
1863 - color: @text;
1864 - background:
1865 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%),
1866 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%),
1867 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1868 - background-attachment: fixed;
1869 -}
1870 -
1871 -/* Let the body background show through the XWiki wrappers.
1872 -#mainContentArea,
1873 -.resource-page,
1874 -.resources-index-page {
1875 - background: transparent !important;
1876 - background-image: none !important;
1877 -}
1878 -*/
1879 -/* Remove local decorative backgrounds that compete with the global gradient.
1880 -.hero,
1881 -.hero.hero-centered,
1882 -.trust-strip,
1883 -.industry-trust-section,
1884 -.split-section,
1885 -.resource-strip,
1886 -.homepage-resource-strip,
1887 -.resource-header,
1888 -.product-section-muted,
1889 -.resources-index-page {
1890 - background: transparent !important;
1891 - background-image: none !important;
1892 -}
1893 - */
1894 -/* Keep large panels readable, but remove their inner gradients.
1895 -.industry-trust-section .industry-trust-panel,
1896 -.cta-panel,
1897 -.resource-inline-cta,
1898 -.resource-note,
1899 -.resource-cta {
1900 - background: #fff !important;
1901 - background-image: none !important;
1902 -} */
1903 -
1904 -/* ========== Main Page Hero / SaaS Layout ========== */
1905 -
1906 -#mainContentArea .hero.hero-saas {
1907 - min-height: auto;
1908 - padding: 60px 0 34px;
1909 - display: flex;
1910 - align-items: center;
1911 - overflow: hidden;
1912 - background: transparent;
1913 -}
1914 -
1915 -#mainContentArea .hero-layout {
1916 - max-width: 1120px;
1917 - margin: 0 auto;
1918 - display: grid;
1919 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1920 - gap: 56px;
1921 - align-items: center;
1922 -}
1923 -
1924 -#mainContentArea .hero-copy {
1925 - min-width: 0;
1926 - text-align: left;
1927 -}
1928 -
1929 -#mainContentArea .hero.hero-saas h1 {
1930 - max-width: 640px;
1931 - margin: 0 0 26px;
1932 - font-size: 60px;
1933 - font-weight: 800;
1934 - line-height: 1;
1935 - letter-spacing: -3px;
1936 -}
1937 -
1938 -#mainContentArea .hero.hero-saas h1 span {
1939 - color: @brand;
1940 -}
1941 -
1942 -#mainContentArea .hero.hero-saas .lead {
1943 - max-width: 590px;
1944 - margin: 0 0 28px;
1945 - color: #334155;
1946 - text-align: left;
1947 - font-size: 18px;
1948 - line-height: 1.6;
1949 -}
1950 -
1951 -#mainContentArea .hero.hero-saas .benefits {
1952 - max-width: 620px;
1953 - margin: 0 0 30px;
1954 - padding: 0;
1955 - display: grid;
1956 - grid-template-columns: repeat(2, minmax(0, 1fr));
1957 - gap: 10px 24px;
1958 - list-style: none;
1959 - color: #475569;
1960 - font-size: 15px;
1961 - text-align: left;
1962 -}
1963 -
1964 -#mainContentArea .hero.hero-saas .benefits li {
1965 - display: grid;
1966 - grid-template-columns: 18px minmax(0, 1fr);
1967 - column-gap: 8px;
1968 - align-items: start;
1969 - margin: 0;
1970 - line-height: 1.45;
1971 -}
1972 -
1973 -#mainContentArea .hero.hero-saas .benefits li::before {
1974 - content: "✓";
1975 - display: block;
1976 - width: 18px;
1977 - color: @brand;
1978 - font-weight: 900;
1979 - line-height: 1.45;
1980 - text-align: left;
1981 - margin: 0;
1982 -}
1983 -
1984 -#mainContentArea .hero.hero-saas .hero-actions,
1985 -#mainContentArea .hero.hero-saas #hero-cta {
1986 - display: flex;
1987 - flex-wrap: wrap;
1988 - justify-content: flex-start;
1989 - gap: 12px;
1990 - margin-top: 0;
1991 -}
1992 -
1993 -#mainContentArea .hero-image-wrapper {
1994 - min-width: 0;
1995 - display: flex;
1996 - justify-content: center;
1997 - align-items: center;
1998 -}
1999 -
2000 -#mainContentArea .hero-image {
2001 - display: block;
2002 - width: 100%;
2003 - max-width: 620px;
2004 - height: auto;
2005 - border: 0;
2006 -}
2007 -
2008 -/* ========== Main Page Hero Responsive ========== */
2009 -
2010 -@media (max-width: 1100px) {
2011 - #mainContentArea .hero-layout {
2012 - max-width: 760px;
2013 - grid-template-columns: 1fr;
2014 - gap: 34px;
2015 - }
2016 -
2017 - #mainContentArea .hero-copy {
2018 - order: 1;
2019 - text-align: center;
2020 - }
2021 -
2022 - #mainContentArea .hero-image-wrapper {
2023 - order: 2;
2024 - }
2025 -
2026 - #mainContentArea .hero.hero-saas h1 {
2027 - margin-left: auto;
2028 - margin-right: auto;
2029 - text-align: center;
2030 - }
2031 -
2032 - #mainContentArea .hero.hero-saas .lead {
2033 - margin-left: auto;
2034 - margin-right: auto;
2035 - text-align: center;
2036 - }
2037 -
2038 - #mainContentArea .hero.hero-saas .benefits {
2039 - margin-left: auto;
2040 - margin-right: auto;
2041 - }
2042 -
2043 - #mainContentArea .hero.hero-saas .hero-actions,
2044 - #mainContentArea .hero.hero-saas #hero-cta {
2045 - justify-content: center;
2046 - }
2047 -
2048 - #mainContentArea .hero-image {
2049 - max-width: 620px;
2050 - }
2051 -}
2052 -
2053 -@media (max-width: 640px) {
2054 - #mainContentArea .hero.hero-saas {
2055 - padding: 42px 0 28px;
2056 - }
2057 -
2058 - #mainContentArea .hero-layout {
2059 - gap: 28px;
2060 - }
2061 -
2062 - #mainContentArea .hero.hero-saas h1 {
2063 - font-size: 42px;
2064 - letter-spacing: -1.5px;
2065 - }
2066 -
2067 - #mainContentArea .hero.hero-saas .lead {
2068 - font-size: 17px;
2069 - }
2070 -
2071 - #mainContentArea .hero.hero-saas .benefits {
2072 - grid-template-columns: 1fr;
2073 - }
2074 -
2075 - #mainContentArea .hero-image {
2076 - max-width: 100%;
2077 - }
2078 -}
2079 -