Changes for page Public Web Site

Summary

• Objects (1 modified, 0 added, 0 removed)
  • XWiki.StyleSheetExtension[0]

Details

XWiki.StyleSheetExtension[0]

code

...	...	@@ -900,4 +900,321 @@
900	900	position: static;
901	901	}
902	902	}
903		-.product-index-hero
	903	+/* ========== Products / Extensions Pages ========== */
	904	+.product-card-kicker {
	905	+ margin-bottom: 10px;
	906	+ padding: 5px 10px;
	907	+ font-size: 12px;
	908	+ text-transform: uppercase;
	909	+ letter-spacing: .04em;
	910	+}
	911	+
	912	+.product-index-section {
	913	+ padding: 52px 0 56px;
	914	+
	915	+ h2 {
	916	+ margin-bottom: 10px;
	917	+ }
	918	+}
	919	+
	920	+.product-card-grid {
	921	+ max-width: 840px;
	922	+ margin: 28px auto 0;
	923	+ display: grid;
	924	+ grid-template-columns: 1fr;
	925	+ grid-gap: 18px;
	926	+}
	927	+
	928	+.product-card {
	929	+ background: #fff;
	930	+ border: 1px solid @line;
	931	+ border-radius: @radius;
	932	+ box-shadow: @shadow-sm;
	933	+ padding: 28px;
	934	+ display: grid;
	935	+ grid-template-columns: 68px 1fr;
	936	+ grid-gap: 22px;
	937	+ align-items: start;
	938	+ transition: transform .18s ease, box-shadow .18s ease;
	939	+
	940	+ &:hover {
	941	+ transform: translateY(-2px);
	942	+ box-shadow: @shadow;
	943	+ }
	944	+
	945	+ .product-card-icon {
	946	+ width: 58px;
	947	+ height: 58px;
	948	+ border-radius: 50%;
	949	+ background: fade(@brand, 10%);
	950	+ border: 1px solid fade(@brand, 20%);
	951	+ color: @brand;
	952	+ display: flex;
	953	+ align-items: center;
	954	+ justify-content: center;
	955	+ font-size: 22px;
	956	+ flex-shrink: 0;
	957	+ }
	958	+
	959	+ h3 {
	960	+ margin: 0 0 10px;
	961	+ color: @text;
	962	+ font-size: 23px;
	963	+ line-height: 1.25;
	964	+ font-weight: 800;
	965	+ }
	966	+
	967	+ p {
	968	+ color: @muted;
	969	+ line-height: 1.6;
	970	+ }
	971	+
	972	+ .card-link {
	973	+ margin: 0;
	974	+
	975	+ a {
	976	+ font-weight: 700;
	977	+ }
	978	+ }
	979	+}
	980	+
	981	+.product-highlights {
	982	+ margin: 14px 0 20px;
	983	+ padding-left: 18px;
	984	+ color: @muted;
	985	+
	986	+ li {
	987	+ margin: 6px 0;
	988	+ line-height: 1.45;
	989	+ }
	990	+}
	991	+
	992	+.product-cta-section {
	993	+ padding: 0 0 56px;
	994	+ border-top: 1px solid @line;
	995	+}
	996	+
	997	+.product-cta-panel {
	998	+ max-width: 860px;
	999	+ margin: 0 auto;
	1000	+ padding: 32px;
	1001	+ border-radius: @radius;
	1002	+ border: 1px solid fade(@brand, 20%);
	1003	+ background:
	1004	+ radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
	1005	+ box-shadow: @shadow-sm;
	1006	+ text-align: center;
	1007	+
	1008	+ h2 {
	1009	+ margin-top: 0;
	1010	+ }
	1011	+
	1012	+ p {
	1013	+ max-width: 680px;
	1014	+ margin: 0 auto 18px;
	1015	+ color: @muted;
	1016	+ line-height: 1.55;
	1017	+ }
	1018	+}
	1019	+
	1020	+/* ========== Individual Product Pages ========== */
	1021	+
	1022	+.product-hero {
	1023	+ min-height: 330px;
	1024	+}
	1025	+
	1026	+.product-layout {
	1027	+ display: grid;
	1028	+ grid-template-columns: 1.1fr .9fr;
	1029	+ grid-gap: 36px;
	1030	+ max-width: 1040px;
	1031	+ margin: 0 auto;
	1032	+ align-items: start;
	1033	+}
	1034	+
	1035	+.product-summary-card,
	1036	+.product-info-card,
	1037	+.product-gallery-panel {
	1038	+ background: #fff;
	1039	+ border: 1px solid @line;
	1040	+ border-radius: @radius;
	1041	+ box-shadow: @shadow-sm;
	1042	+}
	1043	+
	1044	+.product-summary-card {
	1045	+ padding: 26px;
	1046	+
	1047	+ h2 {
	1048	+ text-align: left;
	1049	+ margin-top: 0;
	1050	+ }
	1051	+
	1052	+ p {
	1053	+ color: @muted;
	1054	+ line-height: 1.6;
	1055	+ }
	1056	+
	1057	+ p:last-child {
	1058	+ margin-bottom: 0;
	1059	+ }
	1060	+}
	1061	+
	1062	+.product-info-card {
	1063	+ padding: 22px;
	1064	+
	1065	+ h3 {
	1066	+ margin-top: 0;
	1067	+ margin-bottom: 12px;
	1068	+ }
	1069	+
	1070	+ ul {
	1071	+ margin: 0;
	1072	+ padding-left: 20px;
	1073	+ color: @muted;
	1074	+ }
	1075	+
	1076	+ li {
	1077	+ margin: 8px 0;
	1078	+ line-height: 1.45;
	1079	+ }
	1080	+}
	1081	+
	1082	+.product-feature-grid {
	1083	+ display: grid;
	1084	+ grid-template-columns: repeat(3, minmax(0, 1fr));
	1085	+ grid-gap: 18px;
	1086	+ max-width: 1040px;
	1087	+ margin: 26px auto 0;
	1088	+}
	1089	+
	1090	+.product-feature {
	1091	+ background: #fff;
	1092	+ border: 1px solid @line;
	1093	+ border-radius: @radius;
	1094	+ box-shadow: @shadow-sm;
	1095	+ padding: 22px;
	1096	+ transition: transform .18s ease, box-shadow .18s ease;
	1097	+
	1098	+ &:hover {
	1099	+ transform: translateY(-2px);
	1100	+ box-shadow: @shadow;
	1101	+ }
	1102	+
	1103	+ .feature-icon {
	1104	+ width: 46px;
	1105	+ height: 46px;
	1106	+ border-radius: 50%;
	1107	+ background: fade(@brand, 10%);
	1108	+ color: @brand;
	1109	+ display: flex;
	1110	+ align-items: center;
	1111	+ justify-content: center;
	1112	+ margin-bottom: 14px;
	1113	+ font-size: 18px;
	1114	+ }
	1115	+
	1116	+ h3 {
	1117	+ margin: 0 0 8px;
	1118	+ color: @text;
	1119	+ font-size: 18px;
	1120	+ line-height: 1.25;
	1121	+ }
	1122	+
	1123	+ p {
	1124	+ margin: 0;
	1125	+ color: @muted;
	1126	+ line-height: 1.5;
	1127	+ }
	1128	+}
	1129	+
	1130	+.product-gallery-panel {
	1131	+ max-width: 1040px;
	1132	+ margin: 20px auto 0;
	1133	+ padding: 26px;
	1134	+
	1135	+ h2 {
	1136	+ margin-top: 0;
	1137	+ text-align: center;
	1138	+ }
	1139	+
	1140	+ .gallery-note {
	1141	+ max-width: 700px;
	1142	+ margin: 0 auto 18px;
	1143	+ color: @muted;
	1144	+ text-align: center;
	1145	+ line-height: 1.55;
	1146	+ }
	1147	+}
	1148	+
	1149	+.product-gallery-placeholder {
	1150	+ min-height: 260px;
	1151	+ padding: 28px;
	1152	+ border: 1px dashed fade(@brand, 40%);
	1153	+ border-radius: @radius;
	1154	+ background: fade(@brand, 5%);
	1155	+ color: @muted;
	1156	+ text-align: center;
	1157	+ display: flex;
	1158	+ align-items: center;
	1159	+ justify-content: center;
	1160	+}
	1161	+
	1162	+.product-section-muted {
	1163	+ background:
	1164	+ radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
	1165	+}
	1166	+
	1167	+.product-use-cases {
	1168	+ ul {
	1169	+ margin: 0;
	1170	+ padding-left: 20px;
	1171	+ color: @muted;
	1172	+ }
	1173	+
	1174	+ li {
	1175	+ margin: 8px 0;
	1176	+ line-height: 1.5;
	1177	+ }
	1178	+}
	1179	+
	1180	+@media (max-width: 980px) {
	1181	+ .product-layout,
	1182	+ .product-feature-grid {
	1183	+ grid-template-columns: 1fr;
	1184	+ }
	1185	+
	1186	+ .product-summary-card h2 {
	1187	+ text-align: center;
	1188	+ }
	1189	+}
	1190	+
	1191	+@media (max-width: 640px) {
	1192	+ .product-index-hero {
	1193	+ padding: 38px 0 34px;
	1194	+
	1195	+ .page-lead {
	1196	+ font-size: 17px;
	1197	+ }
	1198	+ }
	1199	+
	1200	+ .product-card {
	1201	+ grid-template-columns: 1fr;
	1202	+ padding: 22px;
	1203	+ text-align: left;
	1204	+
	1205	+ .product-card-icon {
	1206	+ margin-bottom: 2px;
	1207	+ }
	1208	+ }
	1209	+
	1210	+ .product-summary-card,
	1211	+ .product-info-card,
	1212	+ .product-feature,
	1213	+ .product-gallery-panel {
	1214	+ padding: 20px;
	1215	+ }
	1216	+
	1217	+ .product-cta-panel {
	1218	+ padding: 24px 20px;
	1219	+ }
	1220	+}