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,426 @@ 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(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%), 740 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 741 + 742 + h1 { 743 + max-width: 820px; 744 + margin: 0 auto 14px; 745 + text-align: center; 746 + line-height: 1.18; 747 + } 748 + 749 + .resource-summary { 750 + max-width: 780px; 751 + margin: 0 auto; 752 + color: @muted; 753 + text-align: center; 754 + font-size: 18px; 755 + line-height: 1.55; 756 + } 757 +} 758 + 759 +.resource-layout { 760 + display: grid; 761 + grid-template-columns: minmax(0, 760px) 280px; 762 + gap: 42px; 763 + max-width: 1080px; 764 + margin: 0 auto; 765 + align-items: start; 766 +} 767 + 768 +.resource-content { 769 + color: @text; 770 + font-size: 16px; 771 + line-height: 1.68; 772 + 773 + h2 { 774 + text-align: left; 775 + margin: 34px 0 12px; 776 + line-height: 1.28; 777 + } 778 + 779 + h3 { 780 + margin: 24px 0 8px; 781 + line-height: 1.3; 782 + } 783 + 784 + p { 785 + margin: 0 0 16px; 786 + } 787 + 788 + ul, 789 + ol { 790 + margin: 0 0 18px; 791 + padding-left: 22px; 792 + } 793 + 794 + li { 795 + margin: 6px 0; 796 + } 797 + 798 + strong { 799 + color: @text; 800 + } 801 +} 802 + 803 +.resource-note { 804 + border-left: 4px solid @brand; 805 + background: @brand-bg; 806 + padding: 16px 18px; 807 + margin: 22px 0; 808 + border-radius: 0 @radius @radius 0; 809 + 810 + p:last-child { 811 + margin-bottom: 0; 812 + } 813 +} 814 + 815 +.resource-checklist { 816 + margin: 18px 0 24px; 817 + padding: 0; 818 + list-style: none; 819 + 820 + li { 821 + position: relative; 822 + padding: 10px 0 10px 34px; 823 + border-bottom: 1px solid @line; 824 + 825 + &:before { 826 + content: "\f00c"; 827 + font-family: FontAwesome; 828 + position: absolute; 829 + left: 0; 830 + top: 11px; 831 + color: @brand; 832 + } 833 + } 834 +} 835 + 836 +.resource-sidebar { 837 + position: sticky; 838 + top: 96px; 839 + border: 1px solid @line; 840 + border-radius: @radius; 841 + padding: 18px; 842 + background: #fff; 843 + box-shadow: @shadow-sm; 844 + 845 + h4 { 846 + margin: 0 0 10px; 847 + } 848 + 849 + ul { 850 + margin: 0; 851 + padding-left: 18px; 852 + color: @muted; 853 + } 854 + 855 + li { 856 + margin: 8px 0; 857 + } 858 + 859 + a { 860 + color: @brand; 861 + font-weight: 600; 862 + } 863 +} 864 + 865 +.resource-cta { 866 + margin-top: 36px; 867 + padding: 22px; 868 + border: 1px solid fade(@brand, 20%); 869 + border-radius: @radius; 870 + background: @brand-bg; 871 + 872 + h3 { 873 + margin-top: 0; 874 + } 875 + 876 + p { 877 + color: @muted; 878 + } 879 +} 880 + 881 +@media (max-width: 900px) { 882 + .resource-layout { 883 + grid-template-columns: 1fr; 884 + } 885 + 886 + .resource-sidebar { 887 + position: static; 888 + } 889 +} 890 +/* ========== Products / Extensions Pages ========== */ 891 + 892 +.product-index-section { 893 + padding: 52px 0 56px; 894 + 895 + h2 { 896 + margin-bottom: 10px; 897 + } 898 +} 899 + 900 +.product-card-grid { 901 + max-width: 840px; 902 + margin: 28px auto 0; 903 + display: grid; 904 + grid-template-columns: 1fr; 905 + grid-gap: 18px; 906 +} 907 + 908 +.product-card { 909 + background: #fff; 910 + border: 1px solid @line; 911 + border-radius: @radius; 912 + box-shadow: @shadow-sm; 913 + padding: 28px; 914 + display: grid; 915 + grid-template-columns: 68px 1fr; 916 + grid-gap: 22px; 917 + align-items: start; 918 + transition: transform .18s ease, box-shadow .18s ease; 919 + 920 + &:hover { 921 + transform: translateY(-2px); 922 + box-shadow: @shadow; 923 + } 924 + 925 + .product-card-icon { 926 + width: 58px; 927 + height: 58px; 928 + border-radius: 50%; 929 + background: fade(@brand, 10%); 930 + border: 1px solid fade(@brand, 20%); 931 + color: @brand; 932 + display: flex; 933 + align-items: center; 934 + justify-content: center; 935 + font-size: 22px; 936 + flex-shrink: 0; 937 + } 938 + 939 + h3 { 940 + margin: 0 0 10px; 941 + color: @text; 942 + font-size: 23px; 943 + line-height: 1.25; 944 + font-weight: 800; 945 + } 946 + 947 + p { 948 + color: @muted; 949 + line-height: 1.6; 950 + } 951 + 952 + .card-link { 953 + margin: 0; 954 + 955 + a { 956 + font-weight: 700; 957 + } 958 + } 959 +} 960 + 961 +.product-card-kicker { 962 + margin-bottom: 10px; 963 + padding: 5px 10px; 964 + font-size: 12px; 965 + text-transform: uppercase; 966 + letter-spacing: .04em; 967 +} 968 + 969 +.product-highlights { 970 + margin: 14px 0 20px; 971 + padding-left: 18px; 972 + color: @muted; 973 + 974 + li { 975 + margin: 6px 0; 976 + line-height: 1.45; 977 + } 978 +} 979 + 980 +/* ========== Individual Product Pages ========== */ 981 + 982 +.product-layout { 983 + display: grid; 984 + grid-template-columns: 1.1fr .9fr; 985 + grid-gap: 36px; 986 + max-width: 1040px; 987 + margin: 0 auto; 988 + align-items: start; 989 +} 990 + 991 +.product-summary-card, 992 +.product-info-card, 993 +.product-gallery-panel { 994 + background: #fff; 995 + border: 1px solid @line; 996 + border-radius: @radius; 997 + box-shadow: @shadow-sm; 998 +} 999 + 1000 +.product-summary-card { 1001 + padding: 26px; 1002 + 1003 + h2 { 1004 + text-align: left; 1005 + margin-top: 0; 1006 + } 1007 + 1008 + p { 1009 + color: @muted; 1010 + line-height: 1.6; 1011 + } 1012 + 1013 + p:last-child { 1014 + margin-bottom: 0; 1015 + } 1016 +} 1017 + 1018 +.product-info-card { 1019 + padding: 22px; 1020 + 1021 + h3 { 1022 + margin-top: 0; 1023 + margin-bottom: 12px; 1024 + } 1025 + 1026 + ul { 1027 + margin: 0; 1028 + padding-left: 20px; 1029 + color: @muted; 1030 + } 1031 + 1032 + li { 1033 + margin: 8px 0; 1034 + line-height: 1.45; 1035 + } 1036 +} 1037 + 1038 +.product-feature-grid { 1039 + display: grid; 1040 + grid-template-columns: repeat(3, minmax(0, 1fr)); 1041 + grid-gap: 18px; 1042 + max-width: 1040px; 1043 + margin: 26px auto 0; 1044 +} 1045 + 1046 +.product-feature { 1047 + background: #fff; 1048 + border: 1px solid @line; 1049 + border-radius: @radius; 1050 + box-shadow: @shadow-sm; 1051 + padding: 22px; 1052 + transition: transform .18s ease, box-shadow .18s ease; 1053 + 1054 + &:hover { 1055 + transform: translateY(-2px); 1056 + box-shadow: @shadow; 1057 + } 1058 + 1059 + .feature-icon { 1060 + width: 46px; 1061 + height: 46px; 1062 + border-radius: 50%; 1063 + background: fade(@brand, 10%); 1064 + color: @brand; 1065 + display: flex; 1066 + align-items: center; 1067 + justify-content: center; 1068 + margin-bottom: 14px; 1069 + font-size: 18px; 1070 + } 1071 + 1072 + h3 { 1073 + margin: 0 0 8px; 1074 + color: @text; 1075 + font-size: 18px; 1076 + line-height: 1.25; 1077 + } 1078 + 1079 + p { 1080 + margin: 0; 1081 + color: @muted; 1082 + line-height: 1.5; 1083 + } 1084 +} 1085 + 1086 +.product-gallery-panel { 1087 + max-width: 1040px; 1088 + margin: 20px auto 0; 1089 + padding: 26px; 1090 + 1091 + h2 { 1092 + margin-top: 0; 1093 + text-align: center; 1094 + } 1095 + 1096 + .gallery-note { 1097 + max-width: 700px; 1098 + margin: 0 auto 18px; 1099 + color: @muted; 1100 + text-align: center; 1101 + line-height: 1.55; 1102 + } 1103 +} 1104 + 1105 +.product-gallery-placeholder { 1106 + min-height: 260px; 1107 + padding: 28px; 1108 + border: 1px dashed fade(@brand, 40%); 1109 + border-radius: @radius; 1110 + background: fade(@brand, 5%); 1111 + color: @muted; 1112 + text-align: center; 1113 + display: flex; 1114 + align-items: center; 1115 + justify-content: center; 1116 +} 1117 + 1118 +.product-section-muted { 1119 + background: 1120 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1121 +} 1122 + 1123 +@media (max-width: 980px) { 1124 + .product-layout, 1125 + .product-feature-grid { 1126 + grid-template-columns: 1fr; 1127 + } 1128 + 1129 + .product-summary-card h2 { 1130 + text-align: center; 1131 + } 1132 +} 1133 + 1134 +@media (max-width: 640px) { 1135 + .product-card { 1136 + grid-template-columns: 1fr; 1137 + padding: 22px; 1138 + text-align: left; 1139 + 1140 + .product-card-icon { 1141 + margin-bottom: 2px; 1142 + } 1143 + } 1144 + 1145 + .product-summary-card, 1146 + .product-info-card, 1147 + .product-feature, 1148 + .product-gallery-panel { 1149 + padding: 20px; 1150 + } 1151 +}
- 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