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,9 +736,22 @@ 736 736 padding: 40px 0 30px; 737 737 border-top: none; 738 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%); 739 + radial-gradient(42rem 14rem at 50% 0%, @brand-bg 0%, transparent 70%); 741 741 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 + 742 742 h1 { 743 743 max-width: 820px; 744 744 margin: 0 auto 14px; ... ... @@ -887,265 +887,3 @@ 887 887 position: static; 888 888 } 889 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 -}