Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.38
edited by Agnease
on 2026/07/03 14:17
Change comment: There is no comment for this version
To version 24.3
edited by Agnease
on 2026/06/24 14:27
Change comment: There is no comment for this version

Summary

Details

Page properties
Default language
... ... @@ -1,0 +1,1 @@
1 +en
Hidden
... ... @@ -1,1 +1,1 @@
1 -true
1 +false
Content
... ... @@ -2,45 +2,7 @@
2 2  #macro (displayPublicContent)
3 3   #set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome'))
4 4   {{html clean="false"}}
5 - <section class="hero hero-saas" id="top">
6 - <div class="container">
7 - <div class="hero-layout">
8 - <div class="hero-copy">
9 - <h1>Professional XWiki consulting <span>and engineering</span></h1>
10 10  
11 - <p class="lead">
12 - Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care.
13 - </p>
14 -
15 - <ul class="benefits">
16 - <li>XWiki LTS upgrades</li>
17 - <li>Maintenance and support</li>
18 - <li>Custom XWiki development</li>
19 - <li>Migrations and integrations</li>
20 - </ul>
21 -
22 - <div class="hero-actions" id="hero-cta">
23 - <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">
24 - Book a free discussion
25 - </a>
26 - <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
27 - </div>
28 - </div>
29 -
30 - <div class="hero-image-wrapper">
31 - <img
32 - class="hero-image"
33 - src="$xwiki.getDocument('PublicWebSite.WebHome').getAttachmentURL('agnease-xwiki-hero.png')"
34 - alt="Illustration of a professional XWiki platform dashboard with upgrade, security and maintenance elements"
35 - width="1200"
36 - height="900"
37 - loading="eager"
38 - />
39 - </div>
40 - </div>
41 - </div>
42 - </section>
43 -#*
44 44   <section class="hero hero-centered" aria-labelledby="hero-title">
45 45   <div class="container hero-inner">
46 46   <h1 id="hero-title">Professional XWiki consulting and engineering</h1>
... ... @@ -64,7 +64,7 @@
64 64   </div>
65 65   </div>
66 66   </section>
67 -*#
29 +
68 68   <section class="trust-strip" aria-label="Agnease experience">
69 69   <div class="container">
70 70   <ul>
... ... @@ -149,9 +149,9 @@
149 149   </div>
150 150   </section>
151 151  
152 - <section class="contrast-band" aria-labelledby="industry-trust-title">
114 + <section class="industry-trust-section" aria-labelledby="industry-trust-title">
153 153   <div class="container">
154 - <div class="contrast-panel">
116 + <div class="industry-trust-panel">
155 155   <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2>
156 156  
157 157   <p class="section-intro">
... ... @@ -159,7 +159,7 @@
159 159   government institutions, transportation, software development, compliance programs and regulated environments.
160 160   </p>
161 161  
162 - <div class="contrast-tags" aria-label="Industries and environments supported">
124 + <div class="industry-tags" aria-label="Industries and environments supported">
163 163   <span>Healthcare</span>
164 164   <span>Financial services</span>
165 165   <span>Scientific research</span>
... ... @@ -170,7 +170,7 @@
170 170   <span>Regulated environments</span>
171 171   </div>
172 172  
173 - <p class="contrast-support">
135 + <p class="industry-support">
174 174   Organizations rely on these platforms to manage documentation, workflows, compliance processes,
175 175   research knowledge and critical business information. From upgrades and authentication integrations
176 176   to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.
agnease-xwiki-hero.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Admin
Size
... ... @@ -1,1 +1,0 @@
1 -981.8 KB
Content
XWiki.StyleSheetExtension[0]
code
... ... @@ -1,5 +1,5 @@
1 1  /* ========== Agnease Public Website ========== */
2 -/*
2 +
3 3  @brand: #00937D;
4 4  @brand-strong: #007B6A;
5 5  @brand-soft: #E7FFF8;
... ... @@ -11,19 +11,6 @@
11 11  @shadow-sm: 0 6px 20px rgba(0, 0, 0, .06);
12 12  @shadow: 0 12px 36px rgba(0, 0, 0, .08);
13 13  @maxw: 1140px;
14 -*/
15 -@brand: #00937D;
16 -@brand-strong: #007B6A;
17 -@brand-soft: #E7FFF8;
18 -@brand-bg: #F7F9FC;
19 -@text: #07182D;
20 -@text-soft: #10243D;
21 -@muted: #64748B;
22 -@line: #E6EBF2;
23 -@radius: 18px;
24 -@shadow-sm: 0 18px 45px rgba(15, 23, 42, .06);
25 -@shadow: 0 30px 80px rgba(15, 23, 42, .12);
26 -@maxw: 1140px;
27 27  
28 28  @section-padding: 30px 0;
29 29  @section-padding-mobile: 28px 0;
... ... @@ -150,7 +150,7 @@
150 150  
151 151  /* ========== Buttons ========== */
152 152  
153 -/*.btn-primary {
140 +.btn-primary {
154 154   background: @brand;
155 155   border-color: @brand;
156 156   color: #fff;
... ... @@ -162,12 +162,18 @@
162 162   color: #fff;
163 163   }
164 164  }
165 -*/
152 +
166 166  .btn-secondary {
167 - color: @text;
154 + color: @brand;
168 168   background: #fff;
169 - border: 1px solid fade(@text, 35%);
156 + border: 1px solid fade(@brand, 35%);
170 170  
158 + &:hover,
159 + &:focus {
160 + color: @brand-strong;
161 + border-color: @brand;
162 + background: @brand-bg;
163 + }
171 171  }
172 172  
173 173  /* ========== Hero ========== */
... ... @@ -179,6 +179,9 @@
179 179  
180 180   &.hero-centered {
181 181   text-align: center;
175 + background:
176 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
177 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
182 182   display: flex;
183 183   align-items: center;
184 184   justify-content: center;
... ... @@ -247,129 +247,37 @@
247 247   margin-top: 22px;
248 248  }
249 249  
250 -/* ========== Contrast Band ========== */
246 +/* ========== Trust Strip ========== */
251 251  
252 -.contrast-band {
253 - position: relative;
254 - z-index: 0;
255 - overflow: visible; /* allow pseudo-element to escape */
256 - padding: 54px 0;
257 - border-top: 0;
258 - color: #fff;
248 +.trust-strip {
249 + padding: 18px 0;
250 + border-top: 1px solid @line;
251 + background: #fff;
259 259  
260 - /* Remove gradient from here */
261 - background: none;
262 -}
253 + ul {
254 + max-width: 960px;
255 + margin: 0 auto;
256 + padding: 0;
257 + list-style: none;
258 + display: flex;
259 + justify-content: center;
260 + gap: 22px;
261 + flex-wrap: wrap;
262 + color: @muted;
263 + font-size: 13px;
264 + }
263 263  
264 -/* Full‑bleed gradient background */
265 -.contrast-band::before {
266 - border: 2px solid red;
267 - content: "";
268 - position: absolute;
269 - top: 0;
270 - left: 50%;
271 - width: 100vw; /* full viewport width */
272 - height: 100%;
273 - transform: translateX(-50%);
274 - z-index: -1;
275 -
276 - background:
277 - radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
278 - radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
279 - linear-gradient(135deg, @text 0%, @text-soft 100%);
280 -}
281 -
282 -/* Grid overlay stays exactly as you had it */
283 -.contrast-band::after {
284 - content: "";
285 - position: absolute;
286 - inset: 0;
287 - background:
288 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
289 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
290 - background-size: 52px 52px;
291 - opacity: .38;
292 - pointer-events: none;
293 - z-index: 0;
294 -}
295 -
296 -.contrast-band .container {
297 - position: relative;
298 - z-index: 1;
299 -}
300 -
301 -/* Everything below stays unchanged */
302 -.contrast-panel {
303 - max-width: 1040px;
304 - margin: 0 auto;
305 - text-align: center;
306 -}
307 -
308 -.contrast-band h2 {
309 - max-width: 860px;
310 - margin: 0 auto 12px;
311 - color: #fff;
312 -}
313 -
314 -.contrast-band .section-intro {
315 - max-width: 840px;
316 - margin: 0 auto 26px;
317 - color: #D9E3EE;
318 -}
319 -
320 -.contrast-tags {
321 - max-width: 940px;
322 - margin: 0 auto;
323 - display: flex;
324 - flex-wrap: wrap;
325 - justify-content: center;
326 - gap: 10px;
327 -}
328 -
329 -.contrast-tags span {
330 - display: inline-flex;
331 - align-items: center;
332 - padding: 8px 13px;
333 - border: 1px solid fade(#fff, 18%);
334 - border-radius: 999px;
335 - background: fade(#fff, 8%);
336 - color: #F8FAFC;
337 - font-size: 13px;
338 - font-weight: 700;
339 - line-height: 1.2;
340 -}
341 -
342 -.contrast-tags span::before {
343 - content: "";
344 - width: 7px;
345 - height: 7px;
346 - margin-right: 8px;
347 - border-radius: 50%;
348 - background: @brand;
349 - box-shadow: 0 0 0 4px fade(@brand, 18%);
350 -}
351 -
352 -.contrast-support {
353 - max-width: 860px;
354 - margin: 30px auto 0;
355 - color: #D9E3EE;
356 - text-align: center;
357 - font-size: 15px;
358 - line-height: 1.7;
359 -}
360 -
361 -@media (max-width: 640px) {
362 - .contrast-band {
363 - padding: 40px 0;
266 + li {
267 + display: flex;
268 + align-items: center;
269 + gap: 7px;
364 364   }
365 365  
366 - .contrast-tags span {
367 - font-size: 12px;
368 - padding: 8px 11px;
272 + i {
273 + color: @brand;
369 369   }
370 370  }
371 371  
372 -
373 373  /* ========== Reusable Grids ========== */
374 374  
375 375  .card-grid,
... ... @@ -417,6 +417,7 @@
417 417  .pathway-card,
418 418  .service-card,
419 419  .resource-card {
324 + background: #fff;
420 420   border: 1px solid @line;
421 421   border-radius: @radius;
422 422   box-shadow: @shadow-sm;
... ... @@ -526,6 +526,80 @@
526 526   }
527 527  }
528 528  
434 +.industry-trust-section {
435 + background:
436 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
437 +
438 + .industry-trust-panel {
439 + max-width: 1040px;
440 + margin: 0 auto;
441 + padding: 30px 28px;
442 + border: 1px solid fade(@brand, 16%);
443 + border-radius: @radius;
444 + background:
445 + radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
446 + box-shadow: @shadow-sm;
447 + text-align: center;
448 + }
449 +
450 + h2 {
451 + margin-bottom: 12px;
452 + }
453 +
454 + .section-intro {
455 + margin-bottom: 20px;
456 + max-width: 820px;
457 + }
458 +
459 + .industry-tags {
460 + max-width: 880px;
461 + margin: 0 auto;
462 + display: flex;
463 + flex-wrap: wrap;
464 + justify-content: center;
465 + gap: 10px;
466 + }
467 +
468 + .industry-tags span {
469 + display: inline-flex;
470 + align-items: center;
471 + padding: 7px 12px;
472 + border: 1px solid fade(@brand, 20%);
473 + border-radius: 999px;
474 + background: #fff;
475 + color: @text;
476 + font-size: 13px;
477 + font-weight: 600;
478 + line-height: 1.2;
479 + box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
480 + }
481 +
482 + .industry-support {
483 + max-width: 820px;
484 + margin: 22px auto 0;
485 + color: @muted;
486 + font-size: 16px;
487 + line-height: 1.6;
488 + }
489 +}
490 +
491 +@media (max-width: 640px) {
492 + .industry-trust-section {
493 + .industry-trust-panel {
494 + padding: 24px 18px;
495 + }
496 +
497 + .industry-tags {
498 + gap: 8px;
499 + }
500 +
501 + .industry-tags span {
502 + font-size: 12px;
503 + padding: 6px 10px;
504 + }
505 + }
506 +}
507 +
529 529  /* ========== Services ========== */
530 530  
531 531  .services {
... ... @@ -538,6 +538,7 @@
538 538   align-items: flex-start;
539 539   gap: 16px;
540 540   padding: 22px;
520 + background: #fff;
541 541   border: 1px solid @line;
542 542   border-radius: @radius;
543 543   box-shadow: @shadow-sm;
... ... @@ -625,6 +625,7 @@
625 625   position: relative;
626 626   padding: 16px 16px 16px 58px;
627 627   margin-bottom: 12px;
608 + background: #fff;
628 628   border: 1px solid @line;
629 629   border-radius: @radius;
630 630   box-shadow: @shadow-sm;
... ... @@ -756,8 +756,8 @@
756 756  
757 757  /* ========== CTA ========== */
758 758  
759 -#mainContentArea .cta-section {
760 - padding: 44px 0 56px;
740 +.cta-section {
741 + padding: @section-padding;
761 761  
762 762   .contact-inline {
763 763   margin: 0;
... ... @@ -769,70 +769,27 @@
769 769   }
770 770  }
771 771  
772 -#mainContentArea .cta-panel {
773 - position: relative;
774 - overflow: hidden;
775 - max-width: 1040px;
753 +.cta-panel {
754 + max-width: 860px;
776 776   margin: 0 auto;
777 - padding: 48px 40px;
778 - border: 0;
779 - border-radius: 26px;
756 + padding: 32px;
757 + border-radius: @radius;
758 + border: 1px solid fade(@brand, 20%);
780 780   background:
781 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
782 - linear-gradient(135deg, @text 0%, @text-soft 100%);
783 - color: #fff;
784 - box-shadow: @shadow;
760 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
761 + box-shadow: @shadow-sm;
785 785   text-align: center;
786 -}
787 787  
788 -#mainContentArea .cta-panel::before {
789 - content: "";
790 - position: absolute;
791 - inset: 0;
792 - background:
793 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
794 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
795 - background-size: 48px 48px;
796 - opacity: .4;
797 - pointer-events: none;
798 -}
764 + h2 {
765 + margin-top: 0;
766 + }
799 799  
800 -#mainContentArea .cta-panel h2,
801 -#mainContentArea .cta-panel p,
802 -#mainContentArea .cta-panel .btn {
803 - position: relative;
804 - z-index: 1;
768 + p {
769 + color: @muted;
770 + line-height: 1.55;
771 + }
805 805  }
806 806  
807 -#mainContentArea .cta-panel h2 {
808 - max-width: 760px;
809 - margin: 0 auto 16px;
810 - color: #fff;
811 -}
812 -
813 -#mainContentArea .cta-panel p {
814 - max-width: 760px;
815 - margin: 0 auto 28px;
816 - color: #DBE4EF;
817 - font-size: 16px;
818 - line-height: 1.6;
819 -}
820 -
821 -#mainContentArea .cta-panel .btn-primary {
822 - border-color: #fff;
823 - background: #fff;
824 - color: @text;
825 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
826 -}
827 -
828 -#mainContentArea .cta-panel .btn-primary:hover,
829 -#mainContentArea .cta-panel .btn-primary:focus {
830 - border-color: #fff;
831 - background: #fff;
832 - color: @brand-strong;
833 - text-decoration: none;
834 -}
835 -
836 836  .resource-inline-cta {
837 837   display: flex;
838 838   align-items: center;
... ... @@ -964,14 +964,9 @@
964 964   gap: 14px;
965 965   }
966 966  
967 - #mainContentArea .cta-panel {
968 - padding: 30px 22px;
969 - border-radius: 20px;
905 + .cta-panel {
906 + padding: 24px 20px;
970 970   }
971 -
972 - #mainContentArea .cta-panel .btn-primary {
973 - width: 100%;
974 - }
975 975  }
976 976  
977 977  /* ========== Resource / Article Pages ========== */
... ... @@ -983,6 +983,9 @@
983 983  .resource-header {
984 984   padding: @section-padding;
985 985   border-top: none;
919 + background:
920 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
921 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
986 986  
987 987   h1 {
988 988   margin: 0 auto 14px;
... ... @@ -1130,6 +1130,7 @@
1130 1130   border: 1px solid @line;
1131 1131   border-radius: @radius;
1132 1132   padding: 18px;
1069 + background: #fff;
1133 1133   box-shadow: @shadow-sm;
1134 1134  
1135 1135   h4 {
... ... @@ -1219,39 +1219,30 @@
1219 1219  }
1220 1220  
1221 1221  .product-card-grid {
1222 - max-width: 980px;
1223 - margin: 26px auto 0;
1159 + max-width: 840px;
1160 + margin: 22px auto 0;
1224 1224   display: grid;
1225 1225   grid-template-columns: 1fr;
1226 - grid-gap: 22px;
1163 + grid-gap: 18px;
1227 1227  }
1228 1228  
1229 1229  .product-card {
1230 - position: relative;
1167 + background: #fff;
1231 1231   border: 1px solid @line;
1232 1232   border-radius: @radius;
1233 1233   box-shadow: @shadow-sm;
1234 - padding: 32px;
1171 + padding: 28px;
1235 1235   display: grid;
1236 - grid-template-columns: 70px 1fr;
1237 - grid-gap: 24px;
1173 + grid-template-columns: 68px 1fr;
1174 + grid-gap: 22px;
1238 1238   align-items: start;
1239 - overflow: hidden;
1240 1240  
1241 - &:before {
1242 - content: "";
1243 - position: absolute;
1244 - inset: 0 auto 0 0;
1245 - width: 5px;
1246 - background: linear-gradient(180deg, @brand 0%, @brand-strong 100%);
1247 - }
1248 -
1249 1249   .product-card-icon {
1250 1250   width: 58px;
1251 1251   height: 58px;
1252 1252   border-radius: 50%;
1253 1253   background: fade(@brand, 10%);
1254 - border: 1px solid fade(@brand, 22%);
1182 + border: 1px solid fade(@brand, 20%);
1255 1255   color: @brand;
1256 1256   display: flex;
1257 1257   align-items: center;
... ... @@ -1260,15 +1260,11 @@
1260 1260   flex-shrink: 0;
1261 1261   }
1262 1262  
1263 - .product-card-body {
1264 - min-width: 0;
1265 - }
1266 -
1267 1267   h3 {
1268 1268   margin: 0 0 10px;
1269 1269   color: @text;
1270 - font-size: 25px;
1271 - line-height: 1.22;
1194 + font-size: 23px;
1195 + line-height: 1.25;
1272 1272   font-weight: 800;
1273 1273   }
1274 1274  
... ... @@ -1277,36 +1277,25 @@
1277 1277   line-height: 1.6;
1278 1278   }
1279 1279  
1280 - .product-card-description {
1281 - max-width: 760px;
1282 - margin: 0 0 14px;
1283 - font-size: 16px;
1204 + .card-link {
1205 + margin: 0;
1206 +
1207 + a {
1208 + font-weight: 700;
1209 + }
1284 1284   }
1285 1285  }
1286 1286  
1287 1287  .product-card-kicker {
1288 - display: inline-flex;
1289 - align-items: center;
1290 - gap: 7px;
1291 - width: fit-content;
1292 1292   margin-bottom: 10px;
1293 1293   padding: 5px 10px;
1294 - border: 1px solid fade(@brand, 24%);
1295 - border-radius: 999px;
1296 - background: fade(@brand, 8%);
1297 - color: @brand-strong;
1298 1298   font-size: 12px;
1299 - font-weight: 800;
1300 1300   text-transform: uppercase;
1301 1301   letter-spacing: .04em;
1302 -
1303 - i {
1304 - color: @brand;
1305 - }
1306 1306  }
1307 1307  
1308 1308  .product-highlights {
1309 - margin: 14px 0 22px;
1222 + margin: 14px 0 20px;
1310 1310   padding-left: 18px;
1311 1311   color: @muted;
1312 1312  
... ... @@ -1316,52 +1316,6 @@
1316 1316   }
1317 1317  }
1318 1318  
1319 -.product-card-actions {
1320 - display: flex;
1321 - align-items: center;
1322 - gap: 16px;
1323 - flex-wrap: wrap;
1324 -
1325 - .btn {
1326 - font-weight: 700;
1327 - }
1328 -}
1329 -
1330 -.product-card-contact {
1331 - color: @brand;
1332 - font-weight: 700;
1333 - text-decoration: underline;
1334 -
1335 - &:hover,
1336 - &:focus {
1337 - color: @brand-strong;
1338 - }
1339 -}
1340 -
1341 -@media (max-width: 640px) {
1342 - .product-card {
1343 - grid-template-columns: 1fr;
1344 - padding: 26px 22px;
1345 - text-align: left;
1346 -
1347 - &:before {
1348 - width: 4px;
1349 - }
1350 -
1351 - .product-card-icon {
1352 - margin-bottom: 2px;
1353 - }
1354 -
1355 - h3 {
1356 - font-size: 22px;
1357 - }
1358 - }
1359 -
1360 - .product-card-actions {
1361 - gap: 12px;
1362 - }
1363 -}
1364 -
1365 1365  /* ========== Individual Product Pages ========== */
1366 1366  
1367 1367  .product-layout {
... ... @@ -1377,6 +1377,7 @@
1377 1377  .product-info-card,
1378 1378  .product-feature,
1379 1379  .product-gallery-panel {
1247 + background: #fff;
1380 1380   border: 1px solid @line;
1381 1381   border-radius: @radius;
1382 1382   box-shadow: @shadow-sm;
... ... @@ -1424,7 +1424,7 @@
1424 1424  
1425 1425   li {
1426 1426   margin: 8px 0;
1427 - line-height: 1.3;
1295 + line-height: 1.45;
1428 1428   }
1429 1429  }
1430 1430  
... ... @@ -1491,14 +1491,6 @@
1491 1491   text-align: center;
1492 1492  }
1493 1493  
1494 -/* Keep the default XWiki gallery style.
1495 - Only add spacing before it and center it. */
1496 -.gallery.xGallery {
1497 - margin: 25px auto;
1498 - width: 920px;
1499 - height: 518px;
1500 -}
1501 -
1502 1502  .product-section-muted {
1503 1503   background:
1504 1504   radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
... ... @@ -1602,10 +1602,6 @@
1602 1602   }
1603 1603   }
1604 1604  
1605 - .gallery.xGallery {
1606 - margin-top: 22px !important;
1607 - }
1608 -
1609 1609   .product-gallery-caption {
1610 1610   margin-top: 10px;
1611 1611   padding: 0 14px;
... ... @@ -1619,6 +1619,7 @@
1619 1619  /* ========== Resources Index ========== */
1620 1620  
1621 1621  .resources-index-page {
1478 + background: #fff;
1622 1622  
1623 1623   .services-grid {
1624 1624   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1654,284 +1654,3 @@
1654 1654   color: @muted;
1655 1655   }
1656 1656  }
1657 -
1658 -/* ========== Global Theme Background ========== */
1659 -
1660 -html,
1661 -body {
1662 - min-height: 100%;
1663 -}
1664 -
1665 -body {
1666 - color: @text;
1667 - background:
1668 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%),
1669 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%),
1670 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1671 - background-attachment: fixed;
1672 -}
1673 -
1674 -#mainContentArea {
1675 - padding: 0;
1676 - overflow-x: hidden;
1677 -}
1678 -
1679 -/* ========== Main Page Hero / SaaS Layout ========== */
1680 -
1681 -#mainContentArea .hero.hero-saas {
1682 - min-height: auto;
1683 - padding: 60px 0 34px;
1684 - display: flex;
1685 - align-items: center;
1686 - overflow: hidden;
1687 - background: transparent;
1688 -}
1689 -
1690 -#mainContentArea .hero-layout {
1691 - max-width: 1120px;
1692 - margin: 0 auto;
1693 - display: grid;
1694 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1695 - gap: 56px;
1696 - align-items: center;
1697 -}
1698 -
1699 -#mainContentArea .hero-copy {
1700 - min-width: 0;
1701 - text-align: left;
1702 -}
1703 -
1704 -#mainContentArea .hero.hero-saas h1 {
1705 - max-width: 640px;
1706 - margin: 0 0 26px;
1707 - font-size: 60px;
1708 - font-weight: 800;
1709 - line-height: 1;
1710 - letter-spacing: -3px;
1711 -}
1712 -
1713 -#mainContentArea .hero.hero-saas h1 span {
1714 - color: @brand;
1715 -}
1716 -
1717 -#mainContentArea .hero.hero-saas .lead {
1718 - max-width: 590px;
1719 - margin: 0 0 28px;
1720 - color: #334155;
1721 - text-align: left;
1722 - font-size: 18px;
1723 - line-height: 1.6;
1724 -}
1725 -
1726 -#mainContentArea .hero.hero-saas .benefits {
1727 - max-width: 620px;
1728 - margin: 0 0 30px;
1729 - padding: 0;
1730 - display: grid;
1731 - grid-template-columns: repeat(2, minmax(0, 1fr));
1732 - gap: 10px 24px;
1733 - list-style: none;
1734 - color: #475569;
1735 - font-size: 15px;
1736 - text-align: left;
1737 -}
1738 -
1739 -#mainContentArea .hero.hero-saas .benefits li {
1740 - display: grid;
1741 - grid-template-columns: 18px minmax(0, 1fr);
1742 - column-gap: 8px;
1743 - align-items: start;
1744 - margin: 0;
1745 - line-height: 1.45;
1746 -}
1747 -
1748 -#mainContentArea .hero.hero-saas .benefits li::before {
1749 - content: "✓";
1750 - display: block;
1751 - width: 18px;
1752 - color: @brand;
1753 - font-weight: 900;
1754 - line-height: 1.45;
1755 - text-align: left;
1756 - margin: 0;
1757 -}
1758 -
1759 -#mainContentArea .hero.hero-saas .hero-actions,
1760 -#mainContentArea .hero.hero-saas #hero-cta {
1761 - display: flex;
1762 - flex-wrap: wrap;
1763 - justify-content: flex-start;
1764 - gap: 12px;
1765 - margin-top: 0;
1766 -}
1767 -
1768 -#mainContentArea .hero-image-wrapper {
1769 - min-width: 0;
1770 - display: flex;
1771 - justify-content: center;
1772 - align-items: center;
1773 -}
1774 -
1775 -#mainContentArea .hero-image {
1776 - display: block;
1777 - width: 100%;
1778 - max-width: 620px;
1779 - height: auto;
1780 - border: 0;
1781 -}
1782 -
1783 -/* ========== Main Page Hero Responsive ========== */
1784 -
1785 -@media (max-width: 1100px) {
1786 - #mainContentArea .hero-layout {
1787 - max-width: 760px;
1788 - grid-template-columns: 1fr;
1789 - gap: 34px;
1790 - }
1791 -
1792 - #mainContentArea .hero-copy {
1793 - order: 1;
1794 - text-align: center;
1795 - }
1796 -
1797 - #mainContentArea .hero-image-wrapper {
1798 - order: 2;
1799 - }
1800 -
1801 - #mainContentArea .hero.hero-saas h1 {
1802 - margin-left: auto;
1803 - margin-right: auto;
1804 - text-align: center;
1805 - }
1806 -
1807 - #mainContentArea .hero.hero-saas .lead {
1808 - margin-left: auto;
1809 - margin-right: auto;
1810 - text-align: center;
1811 - }
1812 -
1813 - #mainContentArea .hero.hero-saas .benefits {
1814 - margin-left: auto;
1815 - margin-right: auto;
1816 - }
1817 -
1818 - #mainContentArea .hero.hero-saas .hero-actions,
1819 - #mainContentArea .hero.hero-saas #hero-cta {
1820 - justify-content: center;
1821 - }
1822 -
1823 - #mainContentArea .hero-image {
1824 - max-width: 620px;
1825 - }
1826 -}
1827 -
1828 -@media (max-width: 640px) {
1829 - #mainContentArea .hero.hero-saas {
1830 - padding: 42px 0 28px;
1831 - }
1832 -
1833 - #mainContentArea .hero-layout {
1834 - gap: 28px;
1835 - }
1836 -
1837 - #mainContentArea .hero.hero-saas h1 {
1838 - font-size: 42px;
1839 - letter-spacing: -1.5px;
1840 - }
1841 -
1842 - #mainContentArea .hero.hero-saas .lead {
1843 - font-size: 17px;
1844 - }
1845 -
1846 - #mainContentArea .hero.hero-saas .benefits {
1847 - grid-template-columns: 1fr;
1848 - }
1849 -
1850 - #mainContentArea .hero-image {
1851 - max-width: 100%;
1852 - }
1853 -}
1854 -
1855 -/* ========== Accessibility / Contrast Improvements ========== */
1856 -
1857 -/* Keep the article area readable while preserving the page background around it. */
1858 -/*#mainContentArea .resource-layout {
1859 - padding: 28px;
1860 - border: 1px solid fade(@line, 85%);
1861 - border-radius: @radius;
1862 - background: rgba(255, 255, 255, .88);
1863 - box-shadow: @shadow-sm;
1864 -}*/
1865 -
1866 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1867 -#mainContentArea .widget,
1868 -#mainContentArea .pathway-card,
1869 -#mainContentArea .service-card,
1870 -#mainContentArea .resource-card,
1871 -#mainContentArea .services .service,
1872 -#mainContentArea .product-card,
1873 -#mainContentArea .product-feature,
1874 -#mainContentArea .product-summary-card,
1875 -#mainContentArea .product-info-card {
1876 - background: #fff;
1877 -}
1878 -
1879 -/* Make notes more readable and visually stronger. */
1880 -#mainContentArea .resource-note {
1881 - border: 1px solid fade(@brand, 18%);
1882 - border-left: 4px solid @brand;
1883 - background: #fff;
1884 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1885 -}
1886 -
1887 -/* Keep the sidebar clearly separated from the background. */
1888 -#mainContentArea .resource-sidebar {
1889 - background: #fff;
1890 -}
1891 -
1892 -/* Make CTA panels stand out more clearly. */
1893 -#mainContentArea .resource-cta,
1894 -#mainContentArea .resource-inline-cta {
1895 - background: #fff;
1896 -}
1897 -
1898 -/* Improve table readability on long resource pages. */
1899 -#mainContentArea .resource-content table {
1900 - background: #fff;
1901 -}
1902 -
1903 -#mainContentArea .resource-content table th {
1904 - color: @text;
1905 - background: #F8FAFC;
1906 -}
1907 -
1908 -#mainContentArea .resource-content table td {
1909 - color: @text-soft;
1910 -}
1911 -
1912 -/* Slightly improve paragraph/list contrast in long articles. */
1913 -#mainContentArea .resource-content p,
1914 -#mainContentArea .resource-content li {
1915 - color: @text-soft;
1916 -}
1917 -
1918 -#mainContentArea .resource-content .resource-note p,
1919 -#mainContentArea .resource-content .resource-checklist li,
1920 -#mainContentArea .resource-content .process-list li {
1921 - color: @muted;
1922 -}
1923 -
1924 -@media (max-width: 900px) {
1925 - #mainContentArea .resource-layout {
1926 - padding: 22px;
1927 - }
1928 -}
1929 -
1930 -@media (max-width: 640px) {
1931 - #mainContentArea .resource-layout {
1932 - padding: 18px;
1933 - border-radius: 14px;
1934 - }
1935 -}
1936 -
1937 -