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