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,215 @@
900	900	position: static;
901	901	}
902	902	}
903		-.product-index-hero
	903	+.agnease-product-page {
	904	+ color: @text;
	905	+
	906	+ .container {
	907	+ max-width: 1040px;
	908	+ }
	909	+
	910	+ .product-index-hero {
	911	+ padding: 56px 0 48px;
	912	+ text-align: center;
	913	+ background:
	914	+ radial-gradient(42rem 16rem at 50% -10%, @brand-soft 0%, transparent 65%),
	915	+ radial-gradient(42rem 16rem at 50% 0%, #E8F6F3 0%, transparent 60%);
	916	+ border-bottom: 1px solid @line;
	917	+ }
	918	+
	919	+ .page-eyebrow {
	920	+ color: @brand;
	921	+ font-size: 13px;
	922	+ font-weight: 800;
	923	+ text-transform: uppercase;
	924	+ letter-spacing: .06em;
	925	+ margin: 0 0 10px;
	926	+ }
	927	+
	928	+ h1 {
	929	+ margin: 0;
	930	+ color: @text;
	931	+ font-size: 36px;
	932	+ line-height: 1.2;
	933	+ font-weight: 700;
	934	+ }
	935	+
	936	+ .page-lead {
	937	+ max-width: 760px;
	938	+ margin: 14px auto 0;
	939	+ color: @muted;
	940	+ font-size: 18px;
	941	+ line-height: 1.55;
	942	+ }
	943	+
	944	+ .product-index-section {
	945	+ padding: 52px 0 56px;
	946	+
	947	+ h2 {
	948	+ text-align: center;
	949	+ margin: 0 0 10px;
	950	+ color: @text;
	951	+ font-size: 28px;
	952	+ line-height: 1.25;
	953	+ font-weight: 600;
	954	+ }
	955	+ }
	956	+
	957	+ .section-intro {
	958	+ max-width: 760px;
	959	+ margin: 0 auto 26px;
	960	+ text-align: center;
	961	+ color: @muted;
	962	+ font-size: 16px;
	963	+ line-height: 1.55;
	964	+ }
	965	+
	966	+ .product-card-grid {
	967	+ max-width: 840px;
	968	+ margin: 0 auto;
	969	+ display: grid;
	970	+ grid-template-columns: 1fr;
	971	+ grid-gap: 18px;
	972	+ }
	973	+
	974	+ .product-card {
	975	+ background: #fff;
	976	+ border: 1px solid @line;
	977	+ border-radius: @radius;
	978	+ box-shadow: @shadow-sm;
	979	+ padding: 28px;
	980	+ display: grid;
	981	+ grid-template-columns: 68px 1fr;
	982	+ grid-gap: 22px;
	983	+ align-items: start;
	984	+ }
	985	+
	986	+ .product-card-icon {
	987	+ width: 58px;
	988	+ height: 58px;
	989	+ border-radius: 50%;
	990	+ background: fade(@brand, 10%);
	991	+ border: 1px solid fade(@brand, 20%);
	992	+ color: @brand;
	993	+ display: flex;
	994	+ align-items: center;
	995	+ justify-content: center;
	996	+ font-size: 22px;
	997	+ }
	998	+
	999	+ .product-label {
	1000	+ display: inline-flex;
	1001	+ margin: 0 0 8px;
	1002	+ padding: 5px 10px;
	1003	+ border-radius: 999px;
	1004	+ color: @brand;
	1005	+ background: fade(@brand, 8%);
	1006	+ border: 1px solid fade(@brand, 18%);
	1007	+ font-size: 12px;
	1008	+ font-weight: 800;
	1009	+ text-transform: uppercase;
	1010	+ letter-spacing: .04em;
	1011	+ }
	1012	+
	1013	+ .product-card h3 {
	1014	+ margin: 0 0 10px;
	1015	+ color: @text;
	1016	+ font-size: 23px;
	1017	+ line-height: 1.25;
	1018	+ font-weight: 600;
	1019	+ }
	1020	+
	1021	+ .product-card p {
	1022	+ color: @muted;
	1023	+ line-height: 1.6;
	1024	+ }
	1025	+
	1026	+ .product-highlights {
	1027	+ margin: 14px 0 20px;
	1028	+ padding-left: 18px;
	1029	+ color: @muted;
	1030	+
	1031	+ li {
	1032	+ margin: 6px 0;
	1033	+ line-height: 1.45;
	1034	+ }
	1035	+ }
	1036	+
	1037	+ .card-link {
	1038	+ margin: 0;
	1039	+ }
	1040	+
	1041	+ .btn-secondary {
	1042	+ color: @brand;
	1043	+ background: #fff;
	1044	+ border: 1px solid fade(@brand, 35%);
	1045	+
	1046	+ &:hover,
	1047	+ &:focus {
	1048	+ color: @brand-strong;
	1049	+ border-color: @brand;
	1050	+ background: @brand-bg;
	1051	+ text-decoration: none;
	1052	+ }
	1053	+ }
	1054	+
	1055	+ .product-cta-section {
	1056	+ padding: 0 0 56px;
	1057	+ }
	1058	+
	1059	+ .product-cta-panel {
	1060	+ max-width: 860px;
	1061	+ margin: 0 auto;
	1062	+ padding: 32px;
	1063	+ border-radius: @radius;
	1064	+ border: 1px solid fade(@brand, 20%);
	1065	+ background:
	1066	+ radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
	1067	+ box-shadow: @shadow-sm;
	1068	+ text-align: center;
	1069	+
	1070	+ h2 {
	1071	+ margin: 0 0 12px;
	1072	+ color: @text;
	1073	+ font-size: 26px;
	1074	+ line-height: 1.25;
	1075	+ }
	1076	+
	1077	+ p {
	1078	+ max-width: 680px;
	1079	+ margin: 0 auto 18px;
	1080	+ color: @muted;
	1081	+ line-height: 1.55;
	1082	+ }
	1083	+ }
	1084	+}
	1085	+
	1086	+@media (max-width: 767px) {
	1087	+ .agnease-product-page {
	1088	+ .product-index-hero {
	1089	+ padding: 38px 0 34px;
	1090	+ }
	1091	+
	1092	+ h1 {
	1093	+ font-size: 30px;
	1094	+ }
	1095	+
	1096	+ .page-lead {
	1097	+ font-size: 16px;
	1098	+ }
	1099	+
	1100	+ .product-card {
	1101	+ grid-template-columns: 1fr;
	1102	+ padding: 22px;
	1103	+ text-align: left;
	1104	+ }
	1105	+
	1106	+ .product-card-icon {
	1107	+ margin-bottom: 2px;
	1108	+ }
	1109	+
	1110	+ .product-cta-panel {
	1111	+ padding: 24px;
	1112	+ }
	1113	+ }
	1114	+}