Skip to Content

Changes for page Public Web Site

Last modified by Alex Cotiuga on 2026/07/25 17:30
From version 28.4
edited by Alex Cotiuga
on 2026/07/01 17:13
Change comment: There is no comment for this version
To version 30.13
edited by Alex Cotiuga
on 2026/07/25 17:08
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -249,6 +249,7 @@
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>
252 252   </div>
253 253   </div>
254 254   </section>
XWiki.StyleSheetExtension[0]
code
... ... @@ -79,7 +79,7 @@
79 79  
80 80  .section-intro {
81 81   max-width: 760px;
82 - margin: 0 auto 22px;
82 + margin: 10px auto 22px;
83 83   text-align: center;
84 84   color: @muted;
85 85   font-size: 16px;
... ... @@ -576,23 +576,104 @@
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 +
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  }
597 597  
598 598  .process-list {
... ... @@ -604,38 +604,75 @@
604 604   li {
605 605   counter-increment: process;
606 606   position: relative;
607 - padding: 16px 16px 16px 58px;
608 - margin-bottom: 12px;
688 + min-height: 104px;
689 + padding: 24px 26px 24px 82px;
690 + margin-bottom: 18px;
609 609   border: 1px solid @line;
610 610   border-radius: @radius;
693 + background: #fff;
611 611   box-shadow: @shadow-sm;
612 612   color: @muted;
613 613   line-height: 1.5;
614 614  
698 + &:last-child {
699 + margin-bottom: 0;
700 + }
701 +
615 615   &:before {
616 616   content: counter(process);
617 617   position: absolute;
618 - left: 16px;
619 - top: 16px;
620 - width: 28px;
621 - height: 28px;
705 + left: 26px;
706 + top: 26px;
707 + width: 38px;
708 + height: 38px;
622 622   border-radius: 50%;
623 - background: fade(@brand, 10%);
624 - color: @brand;
710 + background: @brand;
711 + color: #fff;
625 625   display: flex;
626 626   align-items: center;
627 627   justify-content: center;
628 628   font-weight: 800;
716 + 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;
722 + margin-bottom: 5px;
723 + font-size: 16px;
724 + line-height: 1.3;
635 635   }
636 636   }
637 637  }
638 638  
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 +
639 639  /* ========== Resources ========== */
640 640  
641 641  .resource-strip {
... ... @@ -643,6 +643,7 @@
643 643  }
644 644  
645 645  .resource-card {
764 + background-color: #fff;
646 646   padding: 20px;
647 647  
648 648   h4 {
... ... @@ -738,7 +738,7 @@
738 738  /* ========== CTA ========== */
739 739  
740 740  .cta-section {
741 - padding: @section-padding;
860 + border: none;
742 742  
743 743   .contact-inline {
744 744   margin: 0;
... ... @@ -748,67 +748,68 @@
748 748   color: @brand;
749 749   }
750 750   }
751 -}
752 752  
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 - box-shadow: @shadow-sm;
760 - text-align: center;
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;
761 761  
762 - h2 {
763 - margin-top: 0;
764 - }
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 + }
765 765  
766 - p {
767 - color: @muted;
768 - line-height: 1.55;
769 - }
770 -}
898 + h2,
899 + p,
900 + .btn {
901 + position: relative;
902 + z-index: 1;
903 + }
771 771  
772 -.resource-inline-cta {
773 - display: flex;
774 - align-items: center;
775 - justify-content: space-between;
776 - gap: 22px;
777 - margin: 30px 0;
778 - padding: 20px 22px;
779 - border: 1px solid fade(@brand, 22%);
780 - border-radius: @radius;
781 - background: @brand-bg;
782 - box-shadow: @shadow-sm;
905 + h2 {
906 + max-width: 760px;
907 + margin: 0 auto 16px;
908 + color: #fff;
909 + }
783 783  
784 - p {
785 - margin: 0;
786 - color: @muted;
787 - line-height: 1.55;
788 - }
789 -
790 - strong {
791 - color: @text;
792 - }
793 -
794 - .btn {
795 - flex-shrink: 0;
796 - }
797 -}
798 -
799 -@media (max-width: 767px) {
800 - .resource-inline-cta {
801 - display: block;
802 - text-align: center;
803 -
804 804   p {
805 - margin-bottom: 14px;
912 + max-width: 760px;
913 + margin: 0 auto 28px;
914 + color: #DBE4EF;
915 + font-size: 16px;
916 + line-height: 1.6;
806 806   }
807 807  
808 - .btn {
809 - display: inline-block;
810 - margin-left: auto;
811 - margin-right: auto;
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 + }
812 812   }
813 813   }
814 814  }
... ... @@ -827,8 +827,12 @@
827 827   grid-template-columns: 1fr;
828 828   }
829 829  
830 - .split-copy h2 {
831 - text-align: center;
950 + .split-copy {
951 + padding: 34px 28px;
952 +
953 + h2 {
954 + text-align: center;
955 + }
832 832   }
833 833  }
834 834  
... ... @@ -896,12 +896,35 @@
896 896   padding: 20px;
897 897   }
898 898  
1023 + .split-copy {
1024 + padding: 30px 22px;
1025 + border-radius: 20px;
1026 + }
1027 +
1028 + .process-list li {
1029 + padding: 22px 20px 22px 68px;
1030 +
1031 + &:before {
1032 + left: 20px;
1033 + top: 22px;
1034 + width: 32px;
1035 + height: 32px;
1036 + }
1037 + }
1038 +
899 899   .services .service {
900 900   gap: 14px;
901 901   }
902 902  
903 - .cta-panel {
904 - padding: 24px 20px;
1043 + .cta-section {
1044 + .cta-panel {
1045 + padding: 30px 22px;
1046 + border-radius: 20px;
1047 +
1048 + .btn-primary {
1049 + width: 100%;
1050 + }
1051 + }
905 905   }
906 906  }
907 907  
... ... @@ -981,7 +981,7 @@
981 981  
982 982  .resource-note {
983 983   border-left: 4px solid @brand;
984 - background: @brand-bg;
1131 + background: #fff;
985 985   padding: 16px 18px;
986 986   margin: 22px 0;
987 987   border-radius: 0 @radius @radius 0;
... ... @@ -1113,9 +1113,43 @@
1113 1113   }
1114 1114  }
1115 1115  
1263 +.resource-inline-cta {
1264 + display: flex;
1265 + align-items: center;
1266 + justify-content: space-between;
1267 + gap: 22px;
1268 + margin: 30px 0;
1269 + padding: 20px 22px;
1270 + border: 1px solid @line;
1271 + border-left: 4px solid @brand;
1272 + border-radius: @radius;
1273 + background: #fff;
1274 + box-shadow: @shadow-sm;
1275 +
1276 + p {
1277 + margin: 0;
1278 + color: @muted;
1279 + line-height: 1.55;
1280 + }
1281 +
1282 + strong {
1283 + display: block;
1284 + margin-bottom: 4px;
1285 + color: @text;
1286 + font-size: 17px;
1287 + line-height: 1.3;
1288 + }
1289 +
1290 + .btn {
1291 + flex-shrink: 0;
1292 + white-space: nowrap;
1293 + }
1294 +}
1295 +
1116 1116  .resource-note,
1117 1117  .resource-checklist,
1118 -.resource-cta {
1298 +.resource-cta,
1299 +.resource-inline-cta {
1119 1119   display: flow-root;
1120 1120  }
1121 1121  
... ... @@ -1125,6 +1125,22 @@
1125 1125   }
1126 1126  }
1127 1127  
1309 +@media (max-width: 767px) {
1310 + .resource-inline-cta {
1311 + display: block;
1312 +
1313 + p {
1314 + margin-bottom: 14px;
1315 + }
1316 +
1317 + .btn {
1318 + display: block;
1319 + width: 100%;
1320 + white-space: normal;
1321 + }
1322 + }
1323 +}
1324 +
1128 1128  @media (max-width: 900px) {
1129 1129   .resource-layout {
1130 1130   padding-top: 22px;
... ... @@ -1258,17 +1258,6 @@
1258 1258   }
1259 1259  }
1260 1260  
1261 -.product-card-contact {
1262 - color: @brand;
1263 - font-weight: 700;
1264 - text-decoration: underline;
1265 -
1266 - &:hover,
1267 - &:focus {
1268 - color: @brand-strong;
1269 - }
1270 -}
1271 -
1272 1272  @media (max-width: 640px) {
1273 1273   .product-card {
1274 1274   grid-template-columns: 1fr;
... ... @@ -1635,8 +1635,8 @@
1635 1635   background-image: none !important;
1636 1636  } */
1637 1637  
1824 +/* ========== Main Page Hero / SaaS Layout ========== */
1638 1638  
1639 -/* ========== Hero ========== */
1640 1640  #mainContentArea .hero.hero-saas {
1641 1641   min-height: auto;
1642 1642   padding: 60px 0 34px;
... ... @@ -1645,18 +1645,21 @@
1645 1645   overflow: hidden;
1646 1646   background: transparent;
1647 1647  }
1834 +
1648 1648  #mainContentArea .hero-layout {
1649 1649   max-width: 1120px;
1650 1650   margin: 0 auto;
1651 1651   display: grid;
1652 - grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
1839 + grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1653 1653   gap: 56px;
1654 1654   align-items: center;
1655 1655  }
1656 -#mainContentArea .hero-copy,
1657 -#mainContentArea .hero.hero-saas .lead {
1843 +
1844 +#mainContentArea .hero-copy {
1845 + min-width: 0;
1658 1658   text-align: left;
1659 1659  }
1848 +
1660 1660  #mainContentArea .hero.hero-saas h1 {
1661 1661   max-width: 640px;
1662 1662   margin: 0 0 26px;
... ... @@ -1665,16 +1665,20 @@
1665 1665   line-height: 1;
1666 1666   letter-spacing: -3px;
1667 1667  }
1857 +
1668 1668  #mainContentArea .hero.hero-saas h1 span {
1669 1669   color: @brand;
1670 1670  }
1861 +
1671 1671  #mainContentArea .hero.hero-saas .lead {
1672 1672   max-width: 590px;
1673 1673   margin: 0 0 28px;
1674 1674   color: #334155;
1866 + text-align: left;
1675 1675   font-size: 18px;
1676 1676   line-height: 1.6;
1677 1677  }
1870 +
1678 1678  #mainContentArea .hero.hero-saas .benefits {
1679 1679   max-width: 620px;
1680 1680   margin: 0 0 30px;
... ... @@ -1687,6 +1687,7 @@
1687 1687   font-size: 15px;
1688 1688   text-align: left;
1689 1689  }
1883 +
1690 1690  #mainContentArea .hero.hero-saas .benefits li {
1691 1691   display: grid;
1692 1692   grid-template-columns: 18px minmax(0, 1fr);
... ... @@ -1695,6 +1695,7 @@
1695 1695   margin: 0;
1696 1696   line-height: 1.45;
1697 1697  }
1892 +
1698 1698  #mainContentArea .hero.hero-saas .benefits li::before {
1699 1699   content: "✓";
1700 1700   display: block;
... ... @@ -1705,212 +1705,322 @@
1705 1705   text-align: left;
1706 1706   margin: 0;
1707 1707  }
1708 -#mainContentArea .hero-actions,
1709 -#mainContentArea #hero-cta {
1903 +
1904 +#mainContentArea .hero.hero-saas .hero-actions,
1905 +#mainContentArea .hero.hero-saas #hero-cta {
1710 1710   display: flex;
1711 1711   flex-wrap: wrap;
1712 1712   justify-content: flex-start;
1713 1713   gap: 12px;
1910 + margin-top: 0;
1714 1714  }
1715 -#mainContentArea .hero-visual {
1716 - position: relative;
1717 - min-height: 540px;
1718 -}
1719 -#mainContentArea .hero-browser,
1720 -#mainContentArea .hero-floating {
1721 - border: 1px solid @line;
1722 - background: fade(#fff, 94%);
1723 - box-shadow: @shadow;
1724 - backdrop-filter: blur(14px);
1725 -}
1726 -#mainContentArea .hero-browser {
1727 - position: absolute;
1728 - top: 8px;
1729 - right: 0;
1730 - width: 100%;
1731 - max-width: 720px;
1732 - overflow: hidden;
1733 - border-radius: 18px;
1734 - background: fade(#fff, 88%);
1735 -}
1736 -#mainContentArea .hero-browser-top {
1737 - height: 58px;
1912 +
1913 +#mainContentArea .hero-image-wrapper {
1914 + min-width: 0;
1738 1738   display: flex;
1916 + justify-content: center;
1739 1739   align-items: center;
1740 - gap: 10px;
1741 - padding: 0 24px;
1742 - border-bottom: 1px solid @line;
1743 - background: fade(#fff, 74%);
1744 1744  }
1745 -#mainContentArea .hero-dot,
1746 -#mainContentArea .hero-status-dot {
1747 - border-radius: 50%;
1919 +
1920 +#mainContentArea .hero-image {
1921 + display: block;
1922 + width: 100%;
1923 + max-width: 620px;
1924 + height: auto;
1925 + border: 0;
1748 1748  }
1749 -#mainContentArea .hero-dot {
1750 - width: 10px;
1751 - height: 10px;
1752 - background: #CBD5E1;
1927 +
1928 +/* ========== Main Page Hero Responsive ========== */
1929 +
1930 +@media (max-width: 1100px) {
1931 + #mainContentArea .hero-layout {
1932 + max-width: 760px;
1933 + grid-template-columns: 1fr;
1934 + gap: 34px;
1935 + }
1936 +
1937 + #mainContentArea .hero-copy {
1938 + order: 1;
1939 + text-align: center;
1940 + }
1941 +
1942 + #mainContentArea .hero-image-wrapper {
1943 + order: 2;
1944 + }
1945 +
1946 + #mainContentArea .hero.hero-saas h1 {
1947 + margin-left: auto;
1948 + margin-right: auto;
1949 + text-align: center;
1950 + }
1951 +
1952 + #mainContentArea .hero.hero-saas .lead {
1953 + margin-left: auto;
1954 + margin-right: auto;
1955 + text-align: center;
1956 + }
1957 +
1958 + #mainContentArea .hero.hero-saas .benefits {
1959 + margin-left: auto;
1960 + margin-right: auto;
1961 + }
1962 +
1963 + #mainContentArea .hero.hero-saas .hero-actions,
1964 + #mainContentArea .hero.hero-saas #hero-cta {
1965 + justify-content: center;
1966 + }
1967 +
1968 + #mainContentArea .hero-image {
1969 + max-width: 620px;
1970 + }
1753 1753  }
1754 -#mainContentArea .hero-status-dot {
1755 - width: 8px;
1756 - height: 8px;
1757 - background: @brand;
1972 +
1973 +@media (max-width: 640px) {
1974 + #mainContentArea .hero.hero-saas {
1975 + padding: 42px 0 28px;
1976 + }
1977 +
1978 + #mainContentArea .hero-layout {
1979 + gap: 28px;
1980 + }
1981 +
1982 + #mainContentArea .hero.hero-saas h1 {
1983 + font-size: 42px;
1984 + letter-spacing: -1.5px;
1985 + }
1986 +
1987 + #mainContentArea .hero.hero-saas .lead {
1988 + font-size: 17px;
1989 + }
1990 +
1991 + #mainContentArea .hero.hero-saas .benefits {
1992 + grid-template-columns: 1fr;
1993 + }
1994 +
1995 + #mainContentArea .hero-image {
1996 + max-width: 100%;
1997 + }
1758 1758  }
1759 -#mainContentArea .hero-search {
1760 - margin-left: auto;
1761 - width: 170px;
1762 - height: 26px;
1763 - border: 1px solid #E2E8F0;
1764 - border-radius: 20px;
1765 - background: #F1F5F9;
1999 +#mainContentArea {
2000 + .theme-section {
2001 + padding-top: 58px;
2002 + padding-bottom: 58px;
2003 + }
2004 +
2005 + .theme-section-alt {
2006 + background: #F8FAFC;
2007 + }
2008 +
2009 + .theme-heading {
2010 + max-width: 900px;
2011 + margin: 0 auto 20px;
2012 + display: flex;
2013 + align-items: center;
2014 + justify-content: center;
2015 + gap: 16px;
2016 +
2017 + h2 {
2018 + margin: 2px 0 0;
2019 + text-align: left;
2020 + }
2021 + }
2022 +
2023 + .theme-icon {
2024 + width: 54px;
2025 + height: 54px;
2026 + flex: 0 0 54px;
2027 + display: grid;
2028 + place-items: center;
2029 + border: 1px solid fade(@brand, 18%);
2030 + border-radius: 16px;
2031 + background: fade(@brand, 9%);
2032 + color: @brand;
2033 + font-size: 20px;
2034 + }
2035 +
2036 + .theme-icon-dark {
2037 + border-color: fade(@text, 20%);
2038 + background: @text;
2039 + color: #fff;
2040 + }
2041 +
2042 + .theme-type {
2043 + display: block;
2044 + margin-bottom: 3px;
2045 + color: @brand-strong;
2046 + font-size: 12px;
2047 + font-weight: 800;
2048 + letter-spacing: .06em;
2049 + text-transform: uppercase;
2050 + }
2051 +
2052 + .theme-description {
2053 + max-width: 860px;
2054 + margin: 0 auto 30px;
2055 + color: @text-soft;
2056 + font-size: 16px;
2057 + line-height: 1.7;
2058 +
2059 + p:last-child {
2060 + margin-bottom: 0;
2061 + }
2062 + }
2063 +
2064 + .theme-gallery {
2065 + max-width: 1120px;
2066 + margin: 0 auto;
2067 + display: grid;
2068 + grid-template-columns: repeat(3, minmax(0, 1fr));
2069 + gap: 20px;
2070 + }
2071 +
2072 + .theme-gallery-item {
2073 + min-width: 0;
2074 + margin: 0;
2075 + overflow: hidden;
2076 + border: 1px solid @line;
2077 + border-radius: 18px;
2078 + background: #fff;
2079 + box-shadow: @shadow-sm;
2080 +
2081 + a {
2082 + display: block;
2083 + overflow: hidden;
2084 + background: #F8FAFC;
2085 + }
2086 +
2087 + img {
2088 + width: 100%;
2089 + aspect-ratio: 16 / 10;
2090 + display: block;
2091 + object-fit: cover;
2092 + object-position: top center;
2093 + transition: transform .2s ease;
2094 + }
2095 +
2096 + a:hover img,
2097 + a:focus img {
2098 + transform: scale(1.015);
2099 + }
2100 +
2101 + figcaption {
2102 + padding: 12px 14px;
2103 + color: @text;
2104 + font-size: 14px;
2105 + font-weight: 700;
2106 + text-align: center;
2107 + }
2108 + }
2109 +
2110 + .theme-request-card {
2111 + padding: 30px;
2112 + border: 1px solid @line;
2113 + border-radius: 22px;
2114 + background: #fff;
2115 + box-shadow: @shadow-sm;
2116 + text-align: center;
2117 +
2118 + h3 {
2119 + margin: 0 0 18px;
2120 + }
2121 + }
2122 +
2123 + .theme-request-icon {
2124 + width: 54px;
2125 + height: 54px;
2126 + margin: 0 auto 16px;
2127 + display: grid;
2128 + place-items: center;
2129 + border-radius: 16px;
2130 + background: fade(@brand, 10%);
2131 + color: @brand;
2132 + font-size: 21px;
2133 + }
2134 +
2135 + .theme-request-list {
2136 + max-width: 270px;
2137 + margin: 0 auto 22px;
2138 + padding: 0;
2139 + list-style: none;
2140 + color: @muted;
2141 + text-align: left;
2142 +
2143 + li {
2144 + position: relative;
2145 + margin: 8px 0;
2146 + padding-left: 22px;
2147 +
2148 + &::before {
2149 + content: "\f00c";
2150 + position: absolute;
2151 + left: 0;
2152 + color: @brand;
2153 + font-family: FontAwesome;
2154 + }
2155 + }
2156 + }
2157 +
2158 + .theme-request-note {
2159 + margin: 16px 0 0;
2160 + color: @muted;
2161 + font-size: 13px;
2162 + line-height: 1.5;
2163 + }
2164 +
2165 + .industry-trust-section {
2166 + .industry-tags a {
2167 + display: inline-flex;
2168 + align-items: center;
2169 + padding: 8px 13px;
2170 + border: 1px solid fade(#fff, 18%);
2171 + border-radius: 999px;
2172 + background: fade(#fff, 7%);
2173 + color: #fff;
2174 + font-size: 13px;
2175 + font-weight: 700;
2176 + text-decoration: none;
2177 +
2178 + &:hover,
2179 + &:focus {
2180 + border-color: fade(#fff, 35%);
2181 + background: fade(#fff, 12%);
2182 + color: #fff;
2183 + text-decoration: none;
2184 + }
2185 + }
2186 + }
1766 1766  }
1767 -#mainContentArea .hero-browser-body {
1768 - display: grid;
1769 - grid-template-columns: 150px minmax(0, 1fr);
2188 +
2189 +@media (max-width: 980px) {
2190 + #mainContentArea {
2191 + .theme-gallery {
2192 + grid-template-columns: repeat(2, minmax(0, 1fr));
2193 + }
2194 + }
1770 1770  }
1771 -#mainContentArea .hero-sidebar {
1772 - padding: 24px 18px;
1773 - border-right: 1px solid @line;
1774 - background: #F8FAFC;
1775 -}
1776 -#mainContentArea .hero-nav-item,
1777 -#mainContentArea .hero-status-row,
1778 -#mainContentArea .hero-version-flow,
1779 -#mainContentArea .hero-flow {
1780 - display: flex;
1781 - align-items: center;
1782 -}
1783 -#mainContentArea .hero-nav-item {
1784 - gap: 9px;
1785 - padding: 10px 8px;
1786 - color: #334155;
1787 - font-size: 13px;
1788 -}
1789 -#mainContentArea .hero-nav-icon {
1790 - width: 20px;
1791 - height: 20px;
1792 - border: 1px solid #CBD5E1;
1793 - border-radius: 5px;
1794 -}
1795 -#mainContentArea .hero-content-panel {
1796 - padding: 26px;
1797 -}
1798 -#mainContentArea .hero-panel-title,
1799 -#mainContentArea .hero-card-title {
1800 - color: @text;
1801 - font-weight: 800;
1802 -}
1803 -#mainContentArea .hero-panel-title {
1804 - margin-bottom: 18px;
1805 - font-size: 20px;
1806 -}
1807 -#mainContentArea .hero-skeleton {
1808 - height: 8px;
1809 - margin-bottom: 10px;
1810 - border-radius: 10px;
1811 - background: #E2E8F0;
1812 -}
1813 -#mainContentArea .hero-skeleton.short {
1814 - width: 64%;
1815 -}
1816 -#mainContentArea .hero-dashboard-grid {
1817 - margin-top: 28px;
1818 - display: grid;
1819 - grid-template-columns: repeat(2, minmax(0, 1fr));
1820 - gap: 18px;
1821 -}
1822 -#mainContentArea .hero-mini-card {
1823 - padding: 18px;
1824 - border: 1px solid @line;
1825 - border-radius: 14px;
1826 - background: #fff;
1827 -}
1828 -#mainContentArea .hero-mini-card h4 {
1829 - margin: 0 0 14px;
1830 - font-size: 15px;
1831 -}
1832 -#mainContentArea .hero-status-row {
1833 - gap: 10px;
1834 - margin: 11px 0;
1835 - color: #475569;
1836 - font-size: 13px;
1837 -}
1838 -#mainContentArea .hero-floating {
1839 - position: absolute;
1840 - border-radius: 16px;
1841 -}
1842 -#mainContentArea .hero-upgrade-card {
1843 - left: 0;
1844 - bottom: 72px;
1845 - width: 320px;
1846 - padding: 20px;
1847 -}
1848 -#mainContentArea .hero-security-card {
1849 - right: 20px;
1850 - top: 260px;
1851 - width: 260px;
1852 - padding: 22px;
1853 -}
1854 -#mainContentArea .hero-security-card ul {
1855 - margin: 0;
1856 - padding: 0;
1857 - list-style: none;
1858 -}
1859 -#mainContentArea .hero-security-card li {
1860 - margin: 12px 0;
1861 - font-size: 14px;
1862 -}
1863 -#mainContentArea .hero-security-card li::before {
1864 - content: "✓";
1865 - margin-right: 8px;
1866 - color: @brand;
1867 - font-weight: 900;
1868 -}
1869 -#mainContentArea .hero-card-title {
1870 - margin-bottom: 16px;
1871 -}
1872 -#mainContentArea .hero-version-flow {
1873 - gap: 8px;
1874 -}
1875 -#mainContentArea .hero-version {
1876 - width: 62px;
1877 - height: 54px;
1878 - padding: 0 8px;
1879 - display: grid;
1880 - place-items: center;
1881 - box-sizing: border-box;
1882 - border-radius: 8px;
1883 - background: #F1F5F9;
1884 - color: #334155;
1885 - text-align: center;
1886 - font-size: 13px;
1887 - line-height: 1.25;
1888 -}
1889 -#mainContentArea .hero-version.active {
1890 - width: 84px;
1891 - background: @text;
1892 - color: #fff;
1893 -}
1894 -#mainContentArea .hero-arrow {
1895 - color: #64748B;
1896 -}
1897 -#mainContentArea .hero-flow {
1898 - position: absolute;
1899 - right: 48px;
1900 - bottom: 18px;
1901 - gap: 12px;
1902 -}
1903 -#mainContentArea .hero-env {
1904 - min-width: 130px;
1905 - padding: 16px 20px;
1906 - border: 1px solid @line;
1907 - border-radius: 12px;
1908 - background: #fff;
1909 - color: #475569;
1910 - text-align: center;
1911 - text-transform: uppercase;
1912 - font-size: 12px;
1913 - letter-spacing: 1.3px;
1914 - box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
1915 -}
1916 1916  
2197 +@media (max-width: 640px) {
2198 + #mainContentArea {
2199 + .theme-section {
2200 + padding-top: 40px;
2201 + padding-bottom: 40px;
2202 + }
2203 +
2204 + .theme-heading {
2205 + align-items: flex-start;
2206 + justify-content: flex-start;
2207 +
2208 + h2 {
2209 + font-size: 26px;
2210 + }
2211 + }
2212 +
2213 + .theme-gallery {
2214 + grid-template-columns: 1fr;
2215 + }
2216 +
2217 + .theme-request-card {
2218 + padding: 24px 20px;
2219 + }
2220 + }
2221 +}
XWiki.StyleSheetExtension[2]
cache
... ... @@ -1,0 +1,1 @@
1 +long
name
... ... @@ -1,0 +1,1 @@
1 +Color Themes