Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Objects (2 modified, 0 added, 1 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -726,3 +726,439 @@ 726 726 padding: 24px 20px; 727 727 } 728 728 } 729 +/* ========== Resource / Article Pages ========== */ 730 + 731 +.resource-page { 732 + padding-top: 34px; 733 +} 734 + 735 +.resource-header { 736 + padding: 40px 0 30px; 737 + border-top: none; 738 + background: 739 + radial-gradient(42rem 14rem at 50% 0%, @brand-bg 0%, transparent 70%); 740 + 741 + .resource-kicker { 742 + display: inline-flex; 743 + align-items: center; 744 + gap: 8px; 745 + color: @brand; 746 + background: fade(@brand, 8%); 747 + border: 1px solid fade(@brand, 18%); 748 + border-radius: 999px; 749 + padding: 6px 12px; 750 + margin-bottom: 14px; 751 + font-size: 13px; 752 + font-weight: 700; 753 + } 754 + 755 + h1 { 756 + max-width: 820px; 757 + margin: 0 auto 14px; 758 + text-align: center; 759 + line-height: 1.18; 760 + } 761 + 762 + .resource-summary { 763 + max-width: 780px; 764 + margin: 0 auto; 765 + color: @muted; 766 + text-align: center; 767 + font-size: 18px; 768 + line-height: 1.55; 769 + } 770 +} 771 + 772 +.resource-layout { 773 + display: grid; 774 + grid-template-columns: minmax(0, 760px) 280px; 775 + gap: 42px; 776 + max-width: 1080px; 777 + margin: 0 auto; 778 + align-items: start; 779 +} 780 + 781 +.resource-content { 782 + color: @text; 783 + font-size: 16px; 784 + line-height: 1.68; 785 + 786 + h2 { 787 + text-align: left; 788 + margin: 34px 0 12px; 789 + line-height: 1.28; 790 + } 791 + 792 + h3 { 793 + margin: 24px 0 8px; 794 + line-height: 1.3; 795 + } 796 + 797 + p { 798 + margin: 0 0 16px; 799 + } 800 + 801 + ul, 802 + ol { 803 + margin: 0 0 18px; 804 + padding-left: 22px; 805 + } 806 + 807 + li { 808 + margin: 6px 0; 809 + } 810 + 811 + strong { 812 + color: @text; 813 + } 814 +} 815 + 816 +.resource-note { 817 + border-left: 4px solid @brand; 818 + background: @brand-bg; 819 + padding: 16px 18px; 820 + margin: 22px 0; 821 + border-radius: 0 @radius @radius 0; 822 + 823 + p:last-child { 824 + margin-bottom: 0; 825 + } 826 +} 827 + 828 +.resource-checklist { 829 + margin: 18px 0 24px; 830 + padding: 0; 831 + list-style: none; 832 + 833 + li { 834 + position: relative; 835 + padding: 10px 0 10px 34px; 836 + border-bottom: 1px solid @line; 837 + 838 + &:before { 839 + content: "\f00c"; 840 + font-family: FontAwesome; 841 + position: absolute; 842 + left: 0; 843 + top: 11px; 844 + color: @brand; 845 + } 846 + } 847 +} 848 + 849 +.resource-sidebar { 850 + position: sticky; 851 + top: 96px; 852 + border: 1px solid @line; 853 + border-radius: @radius; 854 + padding: 18px; 855 + background: #fff; 856 + box-shadow: @shadow-sm; 857 + 858 + h4 { 859 + margin: 0 0 10px; 860 + } 861 + 862 + ul { 863 + margin: 0; 864 + padding-left: 18px; 865 + color: @muted; 866 + } 867 + 868 + li { 869 + margin: 8px 0; 870 + } 871 + 872 + a { 873 + color: @brand; 874 + font-weight: 600; 875 + } 876 +} 877 + 878 +.resource-cta { 879 + margin-top: 36px; 880 + padding: 22px; 881 + border: 1px solid fade(@brand, 20%); 882 + border-radius: @radius; 883 + background: @brand-bg; 884 + 885 + h3 { 886 + margin-top: 0; 887 + } 888 + 889 + p { 890 + color: @muted; 891 + } 892 +} 893 + 894 +@media (max-width: 900px) { 895 + .resource-layout { 896 + grid-template-columns: 1fr; 897 + } 898 + 899 + .resource-sidebar { 900 + position: static; 901 + } 902 +} 903 +/* ========== Products / Extensions Pages ========== */ 904 + 905 +.product-index-section { 906 + padding: 52px 0 56px; 907 + 908 + h2 { 909 + margin-bottom: 10px; 910 + } 911 +} 912 + 913 +.product-card-grid { 914 + max-width: 840px; 915 + margin: 28px auto 0; 916 + display: grid; 917 + grid-template-columns: 1fr; 918 + grid-gap: 18px; 919 +} 920 + 921 +.product-card { 922 + background: #fff; 923 + border: 1px solid @line; 924 + border-radius: @radius; 925 + box-shadow: @shadow-sm; 926 + padding: 28px; 927 + display: grid; 928 + grid-template-columns: 68px 1fr; 929 + grid-gap: 22px; 930 + align-items: start; 931 + transition: transform .18s ease, box-shadow .18s ease; 932 + 933 + &:hover { 934 + transform: translateY(-2px); 935 + box-shadow: @shadow; 936 + } 937 + 938 + .product-card-icon { 939 + width: 58px; 940 + height: 58px; 941 + border-radius: 50%; 942 + background: fade(@brand, 10%); 943 + border: 1px solid fade(@brand, 20%); 944 + color: @brand; 945 + display: flex; 946 + align-items: center; 947 + justify-content: center; 948 + font-size: 22px; 949 + flex-shrink: 0; 950 + } 951 + 952 + h3 { 953 + margin: 0 0 10px; 954 + color: @text; 955 + font-size: 23px; 956 + line-height: 1.25; 957 + font-weight: 800; 958 + } 959 + 960 + p { 961 + color: @muted; 962 + line-height: 1.6; 963 + } 964 + 965 + .card-link { 966 + margin: 0; 967 + 968 + a { 969 + font-weight: 700; 970 + } 971 + } 972 +} 973 + 974 +.product-card-kicker { 975 + margin-bottom: 10px; 976 + padding: 5px 10px; 977 + font-size: 12px; 978 + text-transform: uppercase; 979 + letter-spacing: .04em; 980 +} 981 + 982 +.product-highlights { 983 + margin: 14px 0 20px; 984 + padding-left: 18px; 985 + color: @muted; 986 + 987 + li { 988 + margin: 6px 0; 989 + line-height: 1.45; 990 + } 991 +} 992 + 993 +/* ========== Individual Product Pages ========== */ 994 + 995 +.product-layout { 996 + display: grid; 997 + grid-template-columns: 1.1fr .9fr; 998 + grid-gap: 36px; 999 + max-width: 1040px; 1000 + margin: 0 auto; 1001 + align-items: start; 1002 +} 1003 + 1004 +.product-summary-card, 1005 +.product-info-card, 1006 +.product-gallery-panel { 1007 + background: #fff; 1008 + border: 1px solid @line; 1009 + border-radius: @radius; 1010 + box-shadow: @shadow-sm; 1011 +} 1012 + 1013 +.product-summary-card { 1014 + padding: 26px; 1015 + 1016 + h2 { 1017 + text-align: left; 1018 + margin-top: 0; 1019 + } 1020 + 1021 + p { 1022 + color: @muted; 1023 + line-height: 1.6; 1024 + } 1025 + 1026 + p:last-child { 1027 + margin-bottom: 0; 1028 + } 1029 +} 1030 + 1031 +.product-info-card { 1032 + padding: 22px; 1033 + 1034 + h3 { 1035 + margin-top: 0; 1036 + margin-bottom: 12px; 1037 + } 1038 + 1039 + ul { 1040 + margin: 0; 1041 + padding-left: 20px; 1042 + color: @muted; 1043 + } 1044 + 1045 + li { 1046 + margin: 8px 0; 1047 + line-height: 1.45; 1048 + } 1049 +} 1050 + 1051 +.product-feature-grid { 1052 + display: grid; 1053 + grid-template-columns: repeat(3, minmax(0, 1fr)); 1054 + grid-gap: 18px; 1055 + max-width: 1040px; 1056 + margin: 26px auto 0; 1057 +} 1058 + 1059 +.product-feature { 1060 + background: #fff; 1061 + border: 1px solid @line; 1062 + border-radius: @radius; 1063 + box-shadow: @shadow-sm; 1064 + padding: 22px; 1065 + transition: transform .18s ease, box-shadow .18s ease; 1066 + 1067 + &:hover { 1068 + transform: translateY(-2px); 1069 + box-shadow: @shadow; 1070 + } 1071 + 1072 + .feature-icon { 1073 + width: 46px; 1074 + height: 46px; 1075 + border-radius: 50%; 1076 + background: fade(@brand, 10%); 1077 + color: @brand; 1078 + display: flex; 1079 + align-items: center; 1080 + justify-content: center; 1081 + margin-bottom: 14px; 1082 + font-size: 18px; 1083 + } 1084 + 1085 + h3 { 1086 + margin: 0 0 8px; 1087 + color: @text; 1088 + font-size: 18px; 1089 + line-height: 1.25; 1090 + } 1091 + 1092 + p { 1093 + margin: 0; 1094 + color: @muted; 1095 + line-height: 1.5; 1096 + } 1097 +} 1098 + 1099 +.product-gallery-panel { 1100 + max-width: 1040px; 1101 + margin: 20px auto 0; 1102 + padding: 26px; 1103 + 1104 + h2 { 1105 + margin-top: 0; 1106 + text-align: center; 1107 + } 1108 + 1109 + .gallery-note { 1110 + max-width: 700px; 1111 + margin: 0 auto 18px; 1112 + color: @muted; 1113 + text-align: center; 1114 + line-height: 1.55; 1115 + } 1116 +} 1117 + 1118 +.product-gallery-placeholder { 1119 + min-height: 260px; 1120 + padding: 28px; 1121 + border: 1px dashed fade(@brand, 40%); 1122 + border-radius: @radius; 1123 + background: fade(@brand, 5%); 1124 + color: @muted; 1125 + text-align: center; 1126 + display: flex; 1127 + align-items: center; 1128 + justify-content: center; 1129 +} 1130 + 1131 +.product-section-muted { 1132 + background: 1133 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1134 +} 1135 + 1136 +@media (max-width: 980px) { 1137 + .product-layout, 1138 + .product-feature-grid { 1139 + grid-template-columns: 1fr; 1140 + } 1141 + 1142 + .product-summary-card h2 { 1143 + text-align: center; 1144 + } 1145 +} 1146 + 1147 +@media (max-width: 640px) { 1148 + .product-card { 1149 + grid-template-columns: 1fr; 1150 + padding: 22px; 1151 + text-align: left; 1152 + 1153 + .product-card-icon { 1154 + margin-bottom: 2px; 1155 + } 1156 + } 1157 + 1158 + .product-summary-card, 1159 + .product-info-card, 1160 + .product-feature, 1161 + .product-gallery-panel { 1162 + padding: 20px; 1163 + } 1164 +}
- XWiki.StyleSheetExtension[1]
-
- code
-
... ... @@ -7,25 +7,53 @@ 7 7 @line: #E4ECE9; 8 8 @brand-bg: #F4FCFA; 9 9 10 -.agnease-services-menu { 10 +/* Top-level menu items */ 11 + 12 +.agnease-services-menu, 13 +.agnease-products-menu { 11 11 .dropdown-toggle { 12 12 font-weight: inherit; 13 13 font-size: inherit; 14 14 } 15 15 19 + .caret { 20 + margin-left: 4px; 21 + } 22 + 16 16 &.open > .dropdown-toggle, 17 17 .dropdown-toggle:hover, 18 18 .dropdown-toggle:focus { 19 - color: @brand; 26 + color: @brand-strong; 20 20 background: transparent; 28 + background-color: transparent; 29 + box-shadow: none; 21 21 } 31 +} 22 22 23 - .caret { 24 - margin-left: 4px; 25 - } 33 +/* Keep Agnease public top-level menu visually clean when hovered/open/focused */ 34 + 35 +.navbar-nav > li.agnease-services-menu > a, 36 +.navbar-nav > li.agnease-products-menu > a, 37 +.navbar-nav > li.agnease-services-menu > a:hover, 38 +.navbar-nav > li.agnease-products-menu > a:hover, 39 +.navbar-nav > li.agnease-services-menu > a:focus, 40 +.navbar-nav > li.agnease-products-menu > a:focus, 41 +.navbar-nav > li.agnease-services-menu.open > a, 42 +.navbar-nav > li.agnease-products-menu.open > a, 43 +.navbar-nav > li.agnease-services-menu.open > a:hover, 44 +.navbar-nav > li.agnease-products-menu.open > a:hover, 45 +.navbar-nav > li.agnease-services-menu.open > a:focus, 46 +.navbar-nav > li.agnease-products-menu.open > a:focus { 47 + background: transparent; 48 + background-color: transparent; 49 + color: @brand-strong; 50 + box-shadow: none; 26 26 } 27 27 28 -.agnease-services-dropdown { 53 +/* Dropdown panels */ 54 + 55 +.agnease-services-dropdown, 56 +.agnease-products-dropdown { 29 29 min-width: 360px; 30 30 padding: 10px; 31 31 border: 1px solid @line; ... ... @@ -102,12 +102,23 @@ 102 102 } 103 103 } 104 104 133 +/* Products dropdown can be slightly narrower for now */ 134 + 135 +.agnease-products-dropdown { 136 + min-width: 340px; 137 +} 138 + 139 +/* Mobile */ 140 + 105 105 @media (max-width: 767px) { 106 - .agnease-services-dropdown { 142 + .agnease-services-dropdown, 143 + .agnease-products-dropdown { 107 107 min-width: 0; 108 108 width: 100%; 109 109 padding: 6px; 110 110 border-radius: 0; 148 + border-left: 0; 149 + border-right: 0; 111 111 box-shadow: none; 112 112 113 113 > li > a { ... ... @@ -115,15 +115,3 @@ 115 115 } 116 116 } 117 117 } 118 -/* Keep the top-level Services menu visually clean when hovered/open/focused */ 119 -.navbar-nav > li.agnease-services-menu > a, 120 -.navbar-nav > li.agnease-services-menu > a:hover, 121 -.navbar-nav > li.agnease-services-menu > a:focus, 122 -.navbar-nav > li.agnease-services-menu.open > a, 123 -.navbar-nav > li.agnease-services-menu.open > a:hover, 124 -.navbar-nav > li.agnease-services-menu.open > a:focus { 125 - background: transparent; 126 - background-color: transparent; 127 - color: @brand-strong; 128 - box-shadow: none; 129 -}
- XWiki.StyleSheetExtension[2]
-
- cache
-
... ... @@ -1,1 +1,0 @@ 1 -long - code
-
... ... @@ -1,174 +1,0 @@ 1 -/* ========== Resource / Article Pages ========== */ 2 - 3 -.resource-page { 4 - padding-top: 34px; 5 -} 6 - 7 -.resource-header { 8 - padding: 40px 0 30px; 9 - border-top: none; 10 - background: 11 - radial-gradient(42rem 14rem at 50% 0%, @brand-bg 0%, transparent 70%); 12 - 13 - .resource-kicker { 14 - display: inline-flex; 15 - align-items: center; 16 - gap: 8px; 17 - color: @brand; 18 - background: fade(@brand, 8%); 19 - border: 1px solid fade(@brand, 18%); 20 - border-radius: 999px; 21 - padding: 6px 12px; 22 - margin-bottom: 14px; 23 - font-size: 13px; 24 - font-weight: 700; 25 - } 26 - 27 - h1 { 28 - max-width: 820px; 29 - margin: 0 auto 14px; 30 - text-align: center; 31 - line-height: 1.18; 32 - } 33 - 34 - .resource-summary { 35 - max-width: 780px; 36 - margin: 0 auto; 37 - color: @muted; 38 - text-align: center; 39 - font-size: 18px; 40 - line-height: 1.55; 41 - } 42 -} 43 - 44 -.resource-layout { 45 - display: grid; 46 - grid-template-columns: minmax(0, 760px) 280px; 47 - gap: 42px; 48 - max-width: 1080px; 49 - margin: 0 auto; 50 - align-items: start; 51 -} 52 - 53 -.resource-content { 54 - color: @text; 55 - font-size: 16px; 56 - line-height: 1.68; 57 - 58 - h2 { 59 - text-align: left; 60 - margin: 34px 0 12px; 61 - line-height: 1.28; 62 - } 63 - 64 - h3 { 65 - margin: 24px 0 8px; 66 - line-height: 1.3; 67 - } 68 - 69 - p { 70 - margin: 0 0 16px; 71 - } 72 - 73 - ul, 74 - ol { 75 - margin: 0 0 18px; 76 - padding-left: 22px; 77 - } 78 - 79 - li { 80 - margin: 6px 0; 81 - } 82 - 83 - strong { 84 - color: @text; 85 - } 86 -} 87 - 88 -.resource-note { 89 - border-left: 4px solid @brand; 90 - background: @brand-bg; 91 - padding: 16px 18px; 92 - margin: 22px 0; 93 - border-radius: 0 @radius @radius 0; 94 - 95 - p:last-child { 96 - margin-bottom: 0; 97 - } 98 -} 99 - 100 -.resource-checklist { 101 - margin: 18px 0 24px; 102 - padding: 0; 103 - list-style: none; 104 - 105 - li { 106 - position: relative; 107 - padding: 10px 0 10px 34px; 108 - border-bottom: 1px solid @line; 109 - 110 - &:before { 111 - content: "\f00c"; 112 - font-family: FontAwesome; 113 - position: absolute; 114 - left: 0; 115 - top: 11px; 116 - color: @brand; 117 - } 118 - } 119 -} 120 - 121 -.resource-sidebar { 122 - position: sticky; 123 - top: 96px; 124 - border: 1px solid @line; 125 - border-radius: @radius; 126 - padding: 18px; 127 - background: #fff; 128 - box-shadow: @shadow-sm; 129 - 130 - h4 { 131 - margin: 0 0 10px; 132 - } 133 - 134 - ul { 135 - margin: 0; 136 - padding-left: 18px; 137 - color: @muted; 138 - } 139 - 140 - li { 141 - margin: 8px 0; 142 - } 143 - 144 - a { 145 - color: @brand; 146 - font-weight: 600; 147 - } 148 -} 149 - 150 -.resource-cta { 151 - margin-top: 36px; 152 - padding: 22px; 153 - border: 1px solid fade(@brand, 20%); 154 - border-radius: @radius; 155 - background: @brand-bg; 156 - 157 - h3 { 158 - margin-top: 0; 159 - } 160 - 161 - p { 162 - color: @muted; 163 - } 164 -} 165 - 166 -@media (max-width: 900px) { 167 - .resource-layout { 168 - grid-template-columns: 1fr; 169 - } 170 - 171 - .resource-sidebar { 172 - position: static; 173 - } 174 -} - contentType
-
... ... @@ -1,1 +1,0 @@ 1 -LESS - name
-
... ... @@ -1,1 +1,0 @@ 1 -resources - use
-
... ... @@ -1,1 +1,0 @@ 1 -onDemand