Changes for page Public Web Site
Last modified by Agnease on 2026/05/30 16:24
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- code
-
... ... @@ -736,7 +736,8 @@ 736 736 padding: 40px 0 30px; 737 737 border-top: none; 738 738 background: 739 - radial-gradient(42rem 14rem at 50% 0%, @brand-bg 0%, transparent 70%); 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%); 740 740 741 741 .resource-kicker { 742 742 display: inline-flex; ... ... @@ -900,4 +900,265 @@ 900 900 position: static; 901 901 } 902 902 } 903 -.product-index-hero 904 +/* ========== Products / Extensions Pages ========== */ 905 + 906 +.product-index-section { 907 + padding: 52px 0 56px; 908 + 909 + h2 { 910 + margin-bottom: 10px; 911 + } 912 +} 913 + 914 +.product-card-grid { 915 + max-width: 840px; 916 + margin: 28px auto 0; 917 + display: grid; 918 + grid-template-columns: 1fr; 919 + grid-gap: 18px; 920 +} 921 + 922 +.product-card { 923 + background: #fff; 924 + border: 1px solid @line; 925 + border-radius: @radius; 926 + box-shadow: @shadow-sm; 927 + padding: 28px; 928 + display: grid; 929 + grid-template-columns: 68px 1fr; 930 + grid-gap: 22px; 931 + align-items: start; 932 + transition: transform .18s ease, box-shadow .18s ease; 933 + 934 + &:hover { 935 + transform: translateY(-2px); 936 + box-shadow: @shadow; 937 + } 938 + 939 + .product-card-icon { 940 + width: 58px; 941 + height: 58px; 942 + border-radius: 50%; 943 + background: fade(@brand, 10%); 944 + border: 1px solid fade(@brand, 20%); 945 + color: @brand; 946 + display: flex; 947 + align-items: center; 948 + justify-content: center; 949 + font-size: 22px; 950 + flex-shrink: 0; 951 + } 952 + 953 + h3 { 954 + margin: 0 0 10px; 955 + color: @text; 956 + font-size: 23px; 957 + line-height: 1.25; 958 + font-weight: 800; 959 + } 960 + 961 + p { 962 + color: @muted; 963 + line-height: 1.6; 964 + } 965 + 966 + .card-link { 967 + margin: 0; 968 + 969 + a { 970 + font-weight: 700; 971 + } 972 + } 973 +} 974 + 975 +.product-card-kicker { 976 + margin-bottom: 10px; 977 + padding: 5px 10px; 978 + font-size: 12px; 979 + text-transform: uppercase; 980 + letter-spacing: .04em; 981 +} 982 + 983 +.product-highlights { 984 + margin: 14px 0 20px; 985 + padding-left: 18px; 986 + color: @muted; 987 + 988 + li { 989 + margin: 6px 0; 990 + line-height: 1.45; 991 + } 992 +} 993 + 994 +/* ========== Individual Product Pages ========== */ 995 + 996 +.product-layout { 997 + display: grid; 998 + grid-template-columns: 1.1fr .9fr; 999 + grid-gap: 36px; 1000 + max-width: 1040px; 1001 + margin: 0 auto; 1002 + align-items: start; 1003 +} 1004 + 1005 +.product-summary-card, 1006 +.product-info-card, 1007 +.product-gallery-panel { 1008 + background: #fff; 1009 + border: 1px solid @line; 1010 + border-radius: @radius; 1011 + box-shadow: @shadow-sm; 1012 +} 1013 + 1014 +.product-summary-card { 1015 + padding: 26px; 1016 + 1017 + h2 { 1018 + text-align: left; 1019 + margin-top: 0; 1020 + } 1021 + 1022 + p { 1023 + color: @muted; 1024 + line-height: 1.6; 1025 + } 1026 + 1027 + p:last-child { 1028 + margin-bottom: 0; 1029 + } 1030 +} 1031 + 1032 +.product-info-card { 1033 + padding: 22px; 1034 + 1035 + h3 { 1036 + margin-top: 0; 1037 + margin-bottom: 12px; 1038 + } 1039 + 1040 + ul { 1041 + margin: 0; 1042 + padding-left: 20px; 1043 + color: @muted; 1044 + } 1045 + 1046 + li { 1047 + margin: 8px 0; 1048 + line-height: 1.45; 1049 + } 1050 +} 1051 + 1052 +.product-feature-grid { 1053 + display: grid; 1054 + grid-template-columns: repeat(3, minmax(0, 1fr)); 1055 + grid-gap: 18px; 1056 + max-width: 1040px; 1057 + margin: 26px auto 0; 1058 +} 1059 + 1060 +.product-feature { 1061 + background: #fff; 1062 + border: 1px solid @line; 1063 + border-radius: @radius; 1064 + box-shadow: @shadow-sm; 1065 + padding: 22px; 1066 + transition: transform .18s ease, box-shadow .18s ease; 1067 + 1068 + &:hover { 1069 + transform: translateY(-2px); 1070 + box-shadow: @shadow; 1071 + } 1072 + 1073 + .feature-icon { 1074 + width: 46px; 1075 + height: 46px; 1076 + border-radius: 50%; 1077 + background: fade(@brand, 10%); 1078 + color: @brand; 1079 + display: flex; 1080 + align-items: center; 1081 + justify-content: center; 1082 + margin-bottom: 14px; 1083 + font-size: 18px; 1084 + } 1085 + 1086 + h3 { 1087 + margin: 0 0 8px; 1088 + color: @text; 1089 + font-size: 18px; 1090 + line-height: 1.25; 1091 + } 1092 + 1093 + p { 1094 + margin: 0; 1095 + color: @muted; 1096 + line-height: 1.5; 1097 + } 1098 +} 1099 + 1100 +.product-gallery-panel { 1101 + max-width: 1040px; 1102 + margin: 20px auto 0; 1103 + padding: 26px; 1104 + 1105 + h2 { 1106 + margin-top: 0; 1107 + text-align: center; 1108 + } 1109 + 1110 + .gallery-note { 1111 + max-width: 700px; 1112 + margin: 0 auto 18px; 1113 + color: @muted; 1114 + text-align: center; 1115 + line-height: 1.55; 1116 + } 1117 +} 1118 + 1119 +.product-gallery-placeholder { 1120 + min-height: 260px; 1121 + padding: 28px; 1122 + border: 1px dashed fade(@brand, 40%); 1123 + border-radius: @radius; 1124 + background: fade(@brand, 5%); 1125 + color: @muted; 1126 + text-align: center; 1127 + display: flex; 1128 + align-items: center; 1129 + justify-content: center; 1130 +} 1131 + 1132 +.product-section-muted { 1133 + background: 1134 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%); 1135 +} 1136 + 1137 +@media (max-width: 980px) { 1138 + .product-layout, 1139 + .product-feature-grid { 1140 + grid-template-columns: 1fr; 1141 + } 1142 + 1143 + .product-summary-card h2 { 1144 + text-align: center; 1145 + } 1146 +} 1147 + 1148 +@media (max-width: 640px) { 1149 + .product-card { 1150 + grid-template-columns: 1fr; 1151 + padding: 22px; 1152 + text-align: left; 1153 + 1154 + .product-card-icon { 1155 + margin-bottom: 2px; 1156 + } 1157 + } 1158 + 1159 + .product-summary-card, 1160 + .product-info-card, 1161 + .product-feature, 1162 + .product-gallery-panel { 1163 + padding: 20px; 1164 + } 1165 +}