Changes for page Home

Summary

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

Details

Page properties

Content

...	...	@@ -109,17 +109,9 @@
109	109	<p class="lead">
110	110	All the XWiki services you need, delivered with precision and care
111	111	</p>
112		-
113		- #set ($servicesSize = $servicesSectionData.size())
114	114	<div class="services-grid">
115	115	#foreach ($entry in $servicesSectionData)
116		- #set ($classes = "service")
117		- ## If this is the last item AND the total number is odd, center it
118		- #if ($foreach.count == $servicesSize && ($servicesSize % 2) == 1)
119		- #set ($classes = "service service-center")
120		- #end
121		-
122		- <article class="$classes">
	114	+ <article class="service">
123	123	<div class="service-icon">
124	124	<i class="fa fa-$entry.icon" aria-hidden="true"></i>
125	125	</div>

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -1,4 +1,4 @@
1		-/* ========== Agnease Landing (no Bootstrap grid) ========== */
	1	+/* ========== Agnease Landing (scoped to .agnease-landing) ========== */
2	2	@brand: #00937D;
3	3	@brand-strong: #007B6A;
4	4	@text: #2D3A34;
...	...	@@ -9,12 +9,10 @@
9	9	@shadow: 0 12px 36px rgba(0,0,0,.08);
10	10	@maxw: 1140px;
11	11
12		-#mainContentArea {
13		- padding: 0;
14		-}
15		-
16	16	.agnease-landing {
	13	+ /* Base typography */
17	17	color: @text;
	15	+ font: 16px/1.6 Inter, Segoe UI, Roboto, system-ui, -apple-system, Arial, sans-serif;
18	18
19	19	a {
20	20	color: @brand;
...	...	@@ -31,26 +31,24 @@
31	31	display: block;
32	32	}
33	33
34		- .container {
35		- max-width: @maxw;
36		- }
37		-
38	38	.lead {
39	39	color: @muted;
40		- text-align: center;
	34	+ max-width: 72ch;
41	41	}
42		- h2 {
43		- text-align: center;
	36	+
	37	+ /* Keep Bootstrap container behavior, just cap width */
	38	+ .container {
	39	+ max-width: @maxw;
44	44	}
45	45
	42	+ /* Global sections */
46	46	section {
47	47	padding: 32px 0;
48	48	border-top: 1px solid @line;
49		-
50		- &:first-of-type {
51		- border-top: none;
52		- }
53	53	}
	47	+ section:first-of-type {
	48	+ border-top: none;
	49	+ }
54	54
55	55	/* Buttons */
56	56	.btn {
...	...	@@ -81,9 +81,9 @@
81	81	}
82	82	}
83	83
84		- /* ===== HERO ===== */
	80	+ /* ========== HERO ========== */
85	85	.hero {
86		- overflow: hidden;
	82	+ overflow: hidden; /* contain gradients, prevent overflow */
87	87	background-repeat: no-repeat;
88	88	background-attachment: scroll;
89	89
...	...	@@ -99,11 +99,11 @@
99	99	}
100	100
101	101	.hero-inner {
102		- max-width: 850px;
103		- margin: 0 auto;
	98	+ margin: auto;
104	104	display: flex;
105	105	flex-direction: column;
106	106	align-items: center;
	102	+ gap: 1rem;
107	107	}
108	108
109	109	.hero-cta {
...	...	@@ -126,9 +126,10 @@
126	126
127	127	li + li::before {
128	128	content: "•";
129		- margin: 0 5px;
	125	+ margin: 0 5px 0 0;
130	130	}
131	131
	128	+ /* Mobile: only bullets between items 1–2 and 3–4 */
132	132	@media (max-width: 640px) {
133	133	li + li::before {
134	134	content: none;
...	...	@@ -136,21 +136,20 @@
136	136	li:nth-child(1)::after,
137	137	li:nth-child(3)::after {
138	138	content: "•";
139		- margin: 0 5px;
	136	+ margin-left: 5px;
140	140	}
141	141	}
142	142	}
143	143	}
144	144
145		- /* ===== WHY CHOOSE (cards) ===== */
	142	+ /* ========== WHY CHOOSE (widgets) ========== */
146	146	.widgets {
147	147	margin-top: 12px;
148		- display: grid;
149		- grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
150		- grid-gap: 16px;
151	151	}
152	152
153	153	.widget {
	148	+ /* This div is also a Bootstrap col-*, so we don't touch width */
	149	+ margin-bottom: 16px;
154	154	padding: 18px;
155	155	background: #fff;
156	156	border: 1px solid @line;
...	...	@@ -184,27 +184,17 @@
184	184	}
185	185	}
186	186
187		- /* ===== SERVICES ===== */
	183	+ /* ========== SERVICES ========== */
188	188	.services {
189	189	.services-grid {
190		- margin-top: 20px;
191		- display: flex;
192		- flex-wrap: wrap;
193		- gap: 24px;
194		-
195		- /* center the whole block under the heading */
196		- max-width: 960px;
197		- margin-left: auto;
198		- margin-right: auto;
199		- justify-content: center;
	186	+ margin-top: 12px;
200	200	}
201	201
202	202	.service {
203		- flex: 0 1 calc(50% - 12px);
204		- display: flex;
	190	+ margin-bottom: 24px;
	191	+ display: flex; /* horizontal: icon + body */
205	205	align-items: flex-start;
206	206	gap: 16px;
207		- margin-bottom: 8px;
208	208
209	209	.service-icon {
210	210	width: 42px;
...	...	@@ -216,8 +216,8 @@
216	216	font-size: 18px;
217	217	color: @brand;
218	218	background: fade(@brand, 10%);
219		- flex-shrink: 0;
220	220	margin-top: 3px;
	206	+ flex-shrink: 0;
221	221	}
222	222
223	223	.service-body {
...	...	@@ -226,11 +226,13 @@
226	226	font-size: 1.125rem;
227	227	font-weight: 800;
228	228	}
	215	+
229	229	p {
230	230	margin: 0 0 6px;
231	231	color: @text;
232	232	line-height: 1.5;
233	233	}
	221	+
234	234	ul {
235	235	margin: .45rem 0 0;
236	236	padding-left: 1.1rem;
...	...	@@ -237,6 +237,7 @@
237	237	color: @muted;
238	238	font-size: 13px;
239	239	}
	228	+
240	240	li {
241	241	margin: .25rem 0;
242	242	line-height: 1.45;
...	...	@@ -244,33 +244,20 @@
244	244	}
245	245	}
246	246
247		- /* ==== Center last item on its own row while keeping 50% width ==== */
248		- .service-center {
249		- /* same width as siblings */
250		- flex: 0 1 calc(55% - 12px);
251		-
252		- /* push to center */
253		- margin-left: auto;
254		- margin-right: auto;
255		- }
256		-
257		- /* Mobile: 1 per row */
258	258	@media (max-width: 767px) {
259		- .services-grid {
260		- gap: 16px;
261		- max-width: 100%;
	237	+ .service {
	238	+ margin-bottom: 20px;
262	262	}
263	263
264		- .service,
265		- .service-center {
266		- flex: 0 1 100%;
267		- margin-left: 0;
268		- margin-right: 0;
	241	+ .service-icon {
	242	+ width: 36px;
	243	+ height: 36px;
	244	+ font-size: 16px;
269	269	}
270	270	}
271	271	}
272	272
273		- /* ===== CTA ===== */
	249	+ /* ========== CTA inline ========== */
274	274	.cta-section {
275	275	padding: 24px 0 16px;
276	276