Changes for page Public Web Site

Last modified by Agnease on 2026/06/24 15:34

From version 20.12
edited by Agnease
on 2026/06/23 07:47
Change comment: There is no comment for this version
To version 11.19
edited by Agnease
on 2026/05/22 10:08
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -5,23 +5,22 @@
5 5  
6 6   <section class="hero hero-centered" aria-labelledby="hero-title">
7 7   <div class="container hero-inner">
8 - <h1 id="hero-title">Professional XWiki consulting and engineering</h1>
8 + <h1 id="hero-title">Professional XWiki engineering and support</h1>
9 9  
10 10   <p class="lead">
11 - Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical
12 - engineering support, custom development, integrations and long-term care.
11 + Agnease helps organizations upgrade, maintain, secure and extend XWiki so production platforms stay stable,
12 + up-to-date and adapted to real business processes.
13 13   </p>
14 14  
15 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>
16 + <li>Safe LTS upgrades</li>
17 + <li>Support and recovery</li>
18 + <li>Custom XWiki applications</li>
19 + <li>Integrations and migrations</li>
20 20   </ul>
21 21  
22 22   <div class="hero-actions">
23 - <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">Book a free discussion</a>
24 - ##<a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Request a consultation</a>
23 + <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Request a consultation</a>
25 25   <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
26 26   </div>
27 27   </div>
... ... @@ -40,28 +40,26 @@
40 40  
41 41   <section aria-labelledby="platform-title">
42 42   <div class="container">
43 - <h2 id="platform-title">XWiki support for production knowledge platforms</h2>
42 + <h2 id="platform-title">When XWiki becomes business-critical, it needs professional care</h2>
44 44   <p class="section-intro">
45 - XWiki often grows from a documentation space into a business-critical knowledge platform.
46 - When it supports intranets, procedures, workflows, audits or integrations, it needs structured technical care
47 - for upgrades, security, permissions and maintainability.
44 + Many organizations start with XWiki as a documentation platform. Over time, it becomes a knowledge base,
45 + intranet, SOP portal, workflow system, audit trail or integration hub. At that point, upgrades, security,
46 + performance, permissions and maintainability are no longer optional technical details.
48 48   </p>
49 49  
50 50   <div class="pathways">
51 51   <article class="pathway-card">
52 - <div class="card-heading">
53 - <div class="pathway-icon">
54 - <i class="fa fa-refresh" aria-hidden="true"></i>
55 - </div>
56 - <h3>Upgrade XWiki safely</h3>
51 + <div class="pathway-icon">
52 + <i class="fa fa-refresh" aria-hidden="true"></i>
57 57   </div>
54 + <h3>Keep XWiki current</h3>
58 58   <p>
59 - Plan and execute XWiki LTS upgrades with compatibility checks, staging validation and rollback planning.
56 + Plan and execute safe upgrades to supported XWiki versions, with compatibility checks and rollback planning.
60 60   </p>
61 61   <ul>
62 62   <li>LTS upgrade planning</li>
63 63   <li>Extension and custom code review</li>
64 - <li>Staging and production validation</li>
61 + <li>Production rollout validation</li>
65 65   </ul>
66 66   <p class="card-link">
67 67   <a href="$xwiki.getURL('services.xwiki-upgrades')">View upgrade services</a>
... ... @@ -69,19 +69,17 @@
69 69   </article>
70 70  
71 71   <article class="pathway-card">
72 - <div class="card-heading">
73 - <div class="pathway-icon">
74 - <i class="fa fa-life-ring" aria-hidden="true"></i>
75 - </div>
76 - <h3>Maintain XWiki reliably</h3>
69 + <div class="pathway-icon">
70 + <i class="fa fa-life-ring" aria-hidden="true"></i>
77 77   </div>
72 + <h3>Keep XWiki reliable</h3>
78 78   <p>
79 - Keep production XWiki instances stable with troubleshooting, maintenance planning, recovery support and security-aware care.
74 + Get long-term technical care for instances that need to stay stable, secure and recoverable.
80 80   </p>
81 81   <ul>
82 82   <li>Troubleshooting and recovery</li>
83 83   <li>Performance and log analysis</li>
84 - <li>Upgrade and maintenance planning</li>
79 + <li>Security-aware maintenance</li>
85 85   </ul>
86 86   <p class="card-link">
87 87   <a href="$xwiki.getURL('services.xwiki-maintenance-support')">View support services</a>
... ... @@ -89,19 +89,17 @@
89 89   </article>
90 90  
91 91   <article class="pathway-card">
92 - <div class="card-heading">
93 - <div class="pathway-icon">
94 - <i class="fa fa-cogs" aria-hidden="true"></i>
95 - </div>
96 - <h3>Extend XWiki for your processes</h3>
87 + <div class="pathway-icon">
88 + <i class="fa fa-cogs" aria-hidden="true"></i>
97 97   </div>
90 + <h3>Adapt XWiki to your business</h3>
98 98   <p>
99 - Build custom XWiki applications, workflows, dashboards and integrations around real business needs.
92 + Build workflows, custom applications, dashboards, integrations and automation around your processes.
100 100   </p>
101 101   <ul>
102 102   <li>Custom XWiki applications</li>
103 103   <li>Workflows and approvals</li>
104 - <li>APIs, SSO, LDAP and integrations</li>
97 + <li>SSO, LDAP, APIs and integrations</li>
105 105   </ul>
106 106   <p class="card-link">
107 107   <a href="$xwiki.getURL('services.xwiki-development-integrations')">View development services</a>
... ... @@ -111,64 +111,33 @@
111 111   </div>
112 112   </section>
113 113  
114 - <section class="industry-trust-section" aria-labelledby="industry-trust-title">
115 - <div class="container">
116 - <div class="industry-trust-panel">
117 - <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2>
118 -
119 - <p class="section-intro">
120 - Experience supporting XWiki platforms used in healthcare, financial services, scientific research,
121 - government institutions, transportation, software development, compliance programs and regulated environments.
122 - </p>
123 -
124 - <div class="industry-tags" aria-label="Industries and environments supported">
125 - <span>Healthcare</span>
126 - <span>Financial services</span>
127 - <span>Scientific research</span>
128 - <span>Government institutions</span>
129 - <span>Transportation</span>
130 - <span>Software development</span>
131 - <span>Compliance programs</span>
132 - <span>Regulated environments</span>
133 - </div>
134 -
135 - <p class="industry-support">
136 - Organizations rely on these platforms to manage documentation, workflows, compliance processes,
137 - research knowledge and critical business information. From upgrades and authentication integrations
138 - to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.
139 - </p>
140 - </div>
141 - </div>
142 - </section>
143 -
144 144   <section class="split-section" aria-labelledby="why-title">
145 145   <div class="container">
146 146   <div class="split-grid">
147 147   <div class="split-copy">
148 - <h2 id="why-title">Why work with an XWiki specialist</h2>
111 + <h2 id="why-title">Why choose Agnease</h2>
149 149   <p>
150 - XWiki projects often involve more than pages. Production platforms may include custom code,
151 - extensions, authentication, permissions, workflows, integrations, compliance documentation
152 - and business-critical knowledge.
113 + Agnease brings more than 11 years of hands-on XWiki expertise to organizations that need reliable
114 + knowledge platforms, secure upgrades, custom applications, integrations, migrations and long-term support.
153 153   </p>
154 154   <p>
155 - Agnease brings 11+ years of hands-on XWiki experience to help reduce risk, support long-term reliability
156 - and leave the platform easier to maintain after the work is complete.
117 + The approach is practical and engineering-focused: understand the current system, reduce risk,
118 + document the work and leave your XWiki easier to maintain.
157 157   </p>
158 158   </div>
159 159  
160 160   <ol class="process-list">
161 161   <li>
162 - <strong>Review the XWiki environment</strong>
163 - Version, extensions, infrastructure, authentication, permissions, custom code and critical features.
124 + <strong>Review the current situation</strong>
125 + Version, extensions, infrastructure, authentication, custom code and business-critical features.
164 164   </li>
165 165   <li>
166 - <strong>Define the safest next steps</strong>
167 - Scope, risks, dependencies, effort, rollback options and validation requirements.
128 + <strong>Define a safe path forward</strong>
129 + Clear scope, expected effort, risks, rollback options and recommended next steps.
168 168   </li>
169 169   <li>
170 - <strong>Implement, validate and document</strong>
171 - Controlled changes, testing, production validation and notes for future maintenance.
132 + <strong>Deliver and document the work</strong>
133 + Practical implementation, validation and documentation for future maintenance.
172 172   </li>
173 173   </ol>
174 174   </div>
... ... @@ -177,9 +177,9 @@
177 177  
178 178   <section class="resource-strip homepage-resource-strip" aria-labelledby="resources-title">
179 179   <div class="container">
180 - <h2 id="resources-title">XWiki resources for safer long-term maintenance</h2>
142 + <h2 id="resources-title">Useful XWiki resources</h2>
181 181   <p class="section-intro">
182 - Practical articles about XWiki upgrades, customization and production platform care.
144 + Practical guidance for organizations running XWiki in production.
183 183   </p>
184 184  
185 185   <div class="resource-grid">
... ... @@ -186,17 +186,17 @@
186 186   <article class="resource-card">
187 187   <h4>Why upgrade your XWiki instance?</h4>
188 188   <p>
189 - Learn why regular XWiki upgrades reduce security exposure, compatibility issues and long-term maintenance risk.
151 + A business-focused explanation of why regular LTS upgrades reduce security, compatibility and maintenance risk.
190 190   </p>
191 - <a href="$xwiki.getURL('resources.why-upgrade-xwiki')">Read the article</a>
153 + <a href="$xwiki.getURL('resources.why-upgrade-xwiki')">Read the resource</a>
192 192   </article>
193 193  
194 194   <article class="resource-card">
195 195   <h4>XWiki upgrade services</h4>
196 196   <p>
197 - See how XWiki upgrades can be planned, tested and validated for production instances with customizations and integrations.
159 + How Agnease approaches safe XWiki upgrades for real production environments with customizations and integrations.
198 198   </p>
199 - <a href="$xwiki.getURL('services.xwiki-upgrades')">View upgrade services</a>
161 + <a href="$xwiki.getURL('services.xwiki-upgrades')">View the service</a>
200 200   </article>
201 201   </div>
202 202   </div>
... ... @@ -205,10 +205,10 @@
205 205   <section class="cta-section" aria-labelledby="contact-title">
206 206   <div class="container">
207 207   <div class="cta-panel">
208 - <h2 id="contact-title">Need XWiki consulting or support?</h2>
170 + <h2 id="contact-title">Need help with XWiki?</h2>
209 209   <p>
210 - Send your current XWiki version, the issue you are facing, or the type of project you want to build.
211 - A short description is enough to define practical next steps.
172 + Send your current XWiki version, the problem you are facing, or the type of project you want to build.
173 + A short description is enough to start the conversation.
212 212   </p>
213 213   <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Contact Agnease</a>
214 214   </div>
Agnease.Code.SEODetailsClass[0]
metaDescription
... ... @@ -1,1 +1,0 @@
1 -Agnease provides professional XWiki consulting, LTS upgrades, maintenance, custom development, migrations, integrations and security-aware support for production XWiki platforms.
metaTitle
... ... @@ -1,1 +1,0 @@
1 -Professional XWiki Consulting, Upgrades and Development | Agnease
XWiki.StyleSheetExtension[0]
code
... ... @@ -178,7 +178,7 @@
178 178   display: flex;
179 179   align-items: center;
180 180   justify-content: center;
181 - min-height: 330px;
181 + min-height: 300px;
182 182   }
183 183  
184 184   .hero-inner {
... ... @@ -191,16 +191,17 @@
191 191  
192 192   h1 {
193 193   max-width: 790px;
194 - margin-left: auto;
195 - margin-right: auto;
194 + margin: 0 auto;
196 196   line-height: 1.18;
197 197   }
198 198  
199 199   .lead {
200 200   max-width: 820px;
200 + margin: 12px auto 0;
201 + color: @muted;
202 + text-align: center;
201 201   font-size: 19px;
202 202   line-height: 1.55;
203 - margin-top: 12px;
204 204   }
205 205  
206 206   .benefits {
... ... @@ -369,13 +369,6 @@
369 369   flex-direction: column;
370 370   min-height: 100%;
371 371  
372 - .card-heading {
373 - display: flex;
374 - align-items: center;
375 - gap: 14px;
376 - margin-bottom: 14px;
377 - }
378 -
379 379   .pathway-icon {
380 380   width: 52px;
381 381   height: 52px;
... ... @@ -385,12 +385,12 @@
385 385   justify-content: center;
386 386   color: @brand;
387 387   background: fade(@brand, 10%);
382 + margin-bottom: 18px;
388 388   font-size: 19px;
389 - flex-shrink: 0;
390 390   }
391 391  
392 392   h3 {
393 - margin: 0;
387 + margin: 0 0 10px;
394 394   color: @text;
395 395   font-size: 22px;
396 396   line-height: 1.25;
... ... @@ -431,80 +431,6 @@
431 431   }
432 432  }
433 433  
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 -
508 508  /* ========== Services ========== */
509 509  
510 510  .services {
... ... @@ -664,6 +664,31 @@
664 664   }
665 665  }
666 666  
587 +.resource-content {
588 + order: 1;
589 +}
590 +
591 +.resource-sidebar {
592 + order: 2;
593 +}
594 +
595 +@media (max-width: 767px) {
596 + .resource-layout {
597 + display: flex;
598 + flex-direction: column;
599 + }
600 +
601 + .resource-sidebar {
602 + order: 0;
603 + position: static;
604 + width: 100%;
605 + }
606 +
607 + .resource-content {
608 + order: 1;
609 + }
610 +}
611 +
667 667  /* ========== Homepage Resource Strip ========== */
668 668  
669 669  .homepage-resource-strip {
... ... @@ -771,50 +771,6 @@
771 771   }
772 772  }
773 773  
774 -.resource-inline-cta {
775 - display: flex;
776 - align-items: center;
777 - justify-content: space-between;
778 - gap: 22px;
779 - margin: 30px 0;
780 - padding: 20px 22px;
781 - border: 1px solid fade(@brand, 22%);
782 - border-radius: @radius;
783 - background: @brand-bg;
784 - box-shadow: @shadow-sm;
785 -
786 - p {
787 - margin: 0;
788 - color: @muted;
789 - line-height: 1.55;
790 - }
791 -
792 - strong {
793 - color: @text;
794 - }
795 -
796 - .btn {
797 - flex-shrink: 0;
798 - }
799 -}
800 -
801 -@media (max-width: 767px) {
802 - .resource-inline-cta {
803 - display: block;
804 - text-align: center;
805 -
806 - p {
807 - margin-bottom: 14px;
808 - }
809 -
810 - .btn {
811 - display: inline-block;
812 - margin-left: auto;
813 - margin-right: auto;
814 - }
815 - }
816 -}
817 -
818 818  /* ========== Responsive ========== */
819 819  
820 820  @media (max-width: 980px) {
... ... @@ -937,18 +937,14 @@
937 937  }
938 938  
939 939  .resource-layout {
940 - display: block;
841 + display: grid;
842 + grid-template-columns: minmax(0, 760px) 280px;
843 + gap: 42px;
941 941   max-width: 1080px;
942 942   margin: 0 auto;
943 - padding-top: 28px;
846 + align-items: start;
944 944  }
945 945  
946 -.resource-layout::after {
947 - content: "";
948 - display: block;
949 - clear: both;
950 -}
951 -
952 952  .resource-content {
953 953   color: @text;
954 954   font-size: 16px;
... ... @@ -996,45 +996,6 @@
996 996   }
997 997  }
998 998  
999 -.resource-note.related-resources {
1000 - p {
1001 - margin-bottom: 10px;
1002 - }
1003 -
1004 - ul {
1005 - margin: 0;
1006 - padding-left: 20px;
1007 - }
1008 -
1009 - li {
1010 - margin: 6px 0;
1011 - color: @muted;
1012 - }
1013 -}
1014 -
1015 -.resource-faq-item {
1016 - display: flow-root;
1017 - border-bottom: 1px solid @line;
1018 - padding: 12px 0;
1019 -
1020 - summary {
1021 - cursor: pointer;
1022 - font-weight: 700;
1023 - color: @text;
1024 - line-height: 1.4;
1025 - }
1026 -
1027 - summary:hover,
1028 - summary:focus {
1029 - color: @brand-strong;
1030 - }
1031 -
1032 - p {
1033 - margin: 10px 0 4px;
1034 - color: @muted;
1035 - }
1036 -}
1037 -
1038 1038  .resource-checklist {
1039 1039   margin: 18px 0 24px;
1040 1040   padding: 0;
... ... @@ -1057,10 +1057,6 @@
1057 1057  }
1058 1058  
1059 1059  .resource-sidebar {
1060 - float: right;
1061 - width: 280px;
1062 - margin-left: 42px;
1063 - margin-bottom: 28px;
1064 1064   position: sticky;
1065 1065   top: 96px;
1066 1066   border: 1px solid @line;
... ... @@ -1090,14 +1090,8 @@
1090 1090  }
1091 1091  
1092 1092  .resource-cta {
1093 - display: flex;
1094 - flex-direction: column;
1095 - align-items: center;
1096 - text-align: center;
1097 -
1098 - max-width: 820px;
1099 - margin: 42px auto 0;
1100 - padding: 28px 30px;
947 + margin-top: 36px;
948 + padding: 22px;
1101 1101   border: 1px solid fade(@brand, 20%);
1102 1102   border-radius: @radius;
1103 1103   background: @brand-bg;
... ... @@ -1104,43 +1104,19 @@
1104 1104  
1105 1105   h3 {
1106 1106   margin-top: 0;
1107 - margin-bottom: 10px;
1108 1108   }
1109 1109  
1110 1110   p {
1111 - max-width: 680px;
1112 - margin-left: auto;
1113 - margin-right: auto;
1114 1114   color: @muted;
1115 1115   }
1116 -
1117 - .btn {
1118 - margin-top: 8px;
1119 - }
1120 1120  }
1121 1121  
1122 -.resource-note,
1123 -.resource-checklist,
1124 -.resource-cta {
1125 - display: flow-root;
1126 -}
1127 -
1128 -@media (max-width: 767px) {
1129 - .resource-cta {
1130 - padding: 24px 20px;
1131 - }
1132 -}
1133 -
1134 1134  @media (max-width: 900px) {
1135 1135   .resource-layout {
1136 - padding-top: 22px;
964 + grid-template-columns: 1fr;
1137 1137   }
1138 1138  
1139 1139   .resource-sidebar {
1140 - float: none;
1141 - width: 100%;
1142 - margin-left: 0;
1143 - margin-bottom: 24px;
1144 1144   position: static;
1145 1145   }
1146 1146  }
... ... @@ -1242,7 +1242,6 @@
1242 1242  
1243 1243  .product-summary-card,
1244 1244  .product-info-card,
1245 -.product-feature,
1246 1246  .product-gallery-panel {
1247 1247   background: #fff;
1248 1248   border: 1px solid @line;
... ... @@ -1297,15 +1297,12 @@
1297 1297  }
1298 1298  
1299 1299  .product-feature {
1123 + background: #fff;
1124 + border: 1px solid @line;
1125 + border-radius: @radius;
1126 + box-shadow: @shadow-sm;
1300 1300   padding: 22px;
1301 1301  
1302 - .card-heading {
1303 - display: flex;
1304 - align-items: center;
1305 - gap: 14px;
1306 - margin-bottom: 14px;
1307 - }
1308 -
1309 1309   .feature-icon {
1310 1310   width: 46px;
1311 1311   height: 46px;
... ... @@ -1315,12 +1315,12 @@
1315 1315   display: flex;
1316 1316   align-items: center;
1317 1317   justify-content: center;
1138 + margin-bottom: 14px;
1318 1318   font-size: 18px;
1319 - flex-shrink: 0;
1320 1320   }
1321 1321  
1322 1322   h3 {
1323 - margin: 0;
1143 + margin: 0 0 8px;
1324 1324   color: @text;
1325 1325   font-size: 18px;
1326 1326   line-height: 1.25;
... ... @@ -1333,46 +1333,6 @@
1333 1333   }
1334 1334  }
1335 1335  
1336 -.product-gallery-caption {
1337 - max-width: 860px;
1338 - margin: 28px auto 12px;
1339 - color: @muted;
1340 - font-size: 14px;
1341 - line-height: 1.5;
1342 - text-align: center;
1343 -}
1344 -
1345 -.gallery.xGallery {
1346 - width: 100%;
1347 - max-width: 860px;
1348 - margin: 0 auto 46px !important;
1349 - border: 1px solid @line;
1350 - border-radius: @radius;
1351 - background: #fff;
1352 - box-shadow: @shadow-sm;
1353 - overflow: hidden;
1354 - clear: both;
1355 -}
1356 -
1357 -.gallery.xGallery.loading {
1358 - min-height: 260px;
1359 -}
1360 -
1361 -.gallery.xGallery img {
1362 - border-radius: 12px;
1363 -}
1364 -
1365 -.gallery.xGallery .galleria-container,
1366 -.gallery.xGallery .galleria-stage {
1367 - border-radius: @radius;
1368 - overflow: hidden;
1369 -}
1370 -
1371 -.product-section-muted {
1372 - background:
1373 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1374 -}
1375 -
1376 1376  .product-gallery-panel {
1377 1377   max-width: 1040px;
1378 1378   margin: 20px auto 0;
... ... @@ -1405,6 +1405,11 @@
1405 1405   justify-content: center;
1406 1406  }
1407 1407  
1188 +.product-section-muted {
1189 + background:
1190 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1191 +}
1192 +
1408 1408  @media (max-width: 980px) {
1409 1409   .product-layout,
1410 1410   .product-feature-grid {
... ... @@ -1433,1502 +1433,143 @@
1433 1433   .product-gallery-panel {
1434 1434   padding: 20px;
1435 1435   }
1436 -
1437 - .product-gallery-caption {
1438 - margin-top: 22px;
1439 - padding: 0 14px;
1440 - }
1441 -
1442 - .gallery.xGallery {
1443 - max-width: calc(100% - 28px);
1444 - margin-bottom: 34px !important;
1445 - border-radius: 12px;
1446 - }
1447 -
1448 - .gallery.xGallery.loading {
1449 - min-height: 180px;
1450 - }
1451 1451  }
1452 1452  
1453 1453  /* ========== Resources Index ========== */
1454 1454  
1455 1455  .resources-index-page {
1456 - background: #fff;
1457 -
1458 - .services-grid {
1459 - grid-template-columns: repeat(2, minmax(0, 1fr));
1460 - }
1461 -}
1462 -
1463 -@media (max-width: 980px) {
1464 - .resources-index-page {
1465 - .services-grid {
1466 - grid-template-columns: 1fr;
1467 - }
1468 - }
1469 -}
1470 -
1471 -@media (max-width: 767px) {
1472 - .resources-index-page {
1473 - padding: @section-padding-mobile;
1474 - }
1475 -}
1476 -
1477 -.resource-faq-item {
1478 - border-bottom: 1px solid @line;
1479 - padding: 12px 0;
1480 -
1481 - summary {
1482 - cursor: pointer;
1483 - font-weight: 700;/* ========== Agnease Public Website ========== */
1484 -
1485 -@brand: #00937D;
1486 -@brand-strong: #007B6A;
1487 -@brand-soft: #E7FFF8;
1488 -@brand-bg: #F4FCFA;
1489 -@text: #2D3A34;
1490 -@muted: #5B6B64;
1491 -@line: #E4ECE9;
1492 -@radius: 16px;
1493 -@shadow-sm: 0 6px 20px rgba(0, 0, 0, .06);
1494 -@shadow: 0 12px 36px rgba(0, 0, 0, .08);
1495 -@maxw: 1140px;
1496 -
1497 -@section-padding: 30px 0;
1498 -@section-padding-mobile: 28px 0;
1499 -
1500 -/* ========== Base ========== */
1501 -
1502 -#mainContentArea {
1503 - padding: 0;
1504 -}
1505 -
1506 -.container {
1507 - max-width: @maxw;
1508 - margin-left: auto;
1509 - margin-right: auto;
1510 - padding-left: 18px;
1511 - padding-right: 18px;
1512 -}
1513 -
1514 -html {
1515 - scroll-behavior: smooth;
1516 -}
1517 -
1518 -section {
1519 1519   padding: @section-padding;
1520 - border-top: 1px solid @line;
1227 + background: @brand-bg;
1521 1521  
1522 - &:first-of-type {
1523 - border-top: none;
1524 - }
1525 -}
1526 -
1527 -section[id] {
1528 - scroll-margin-top: 92px;
1529 -}
1530 -
1531 -h1,
1532 -h2,
1533 -h3,
1534 -h4 {
1535 - color: @text;
1536 -}
1537 -
1538 -h2 {
1539 - text-align: center;
1540 - margin-top: 0;
1541 -}
1542 -
1543 -.lead {
1544 - color: @muted;
1545 - text-align: center;
1546 - margin-bottom: 0;
1547 -}
1548 -
1549 -.section-intro {
1550 - max-width: 760px;
1551 - margin: 0 auto 22px;
1552 - text-align: center;
1553 - color: @muted;
1554 - font-size: 16px;
1555 - line-height: 1.55;
1556 -}
1557 -
1558 -a {
1559 - color: @brand;
1560 -
1561 - &:hover,
1562 - &:focus {
1563 - color: @brand-strong;
1564 - }
1565 -}
1566 -
1567 -/* ========== Header / Navigation ========== */
1568 -
1569 -.site-header {
1570 - position: sticky;
1571 - top: 0;
1572 - z-index: 1000;
1573 - background: fade(#fff, 96%);
1574 - border-bottom: 1px solid fade(@line, 85%);
1575 - backdrop-filter: blur(8px);
1576 -}
1577 -
1578 -.header-inner {
1579 - min-height: 72px;
1580 - display: flex;
1581 - align-items: center;
1582 - justify-content: space-between;
1583 - gap: 24px;
1584 -}
1585 -
1586 -.site-nav {
1587 - display: flex;
1588 - align-items: center;
1589 - gap: 22px;
1590 - font-size: 15px;
1591 -
1592 - a {
1593 - color: @text;
1594 - text-decoration: none;
1595 - font-weight: 600;
1596 -
1597 - &:hover,
1598 - &:focus {
1599 - color: @brand;
1600 - text-decoration: none;
1601 - }
1602 - }
1603 -
1604 - .nav-cta {
1605 - color: #fff;
1606 - background: @brand;
1607 - border: 1px solid @brand;
1608 - border-radius: 6px;
1609 - padding: 8px 14px;
1610 -
1611 - &:hover,
1612 - &:focus {
1613 - color: #fff;
1614 - background: @brand-strong;
1615 - border-color: @brand-strong;
1616 - }
1617 - }
1618 -}
1619 -
1620 -/* ========== Buttons ========== */
1621 -
1622 -.btn-primary {
1623 - background: @brand;
1624 - border-color: @brand;
1625 - color: #fff;
1626 -
1627 - &:hover,
1628 - &:focus {
1629 - background: @brand-strong;
1630 - border-color: @brand-strong;
1631 - color: #fff;
1632 - }
1633 -}
1634 -
1635 -.btn-secondary {
1636 - color: @brand;
1637 - background: #fff;
1638 - border: 1px solid fade(@brand, 35%);
1639 -
1640 - &:hover,
1641 - &:focus {
1642 - color: @brand-strong;
1643 - border-color: @brand;
1644 - background: @brand-bg;
1645 - }
1646 -}
1647 -
1648 -/* ========== Hero ========== */
1649 -
1650 -.hero {
1651 - overflow: hidden;
1652 - background-repeat: no-repeat;
1653 - background-attachment: scroll;
1654 -
1655 - &.hero-centered {
1229 + .resources-intro {
1230 + max-width: 820px;
1231 + margin: 0 auto 32px;
1656 1656   text-align: center;
1657 - background:
1658 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
1659 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
1660 - display: flex;
1661 - align-items: center;
1662 - justify-content: center;
1663 - min-height: 330px;
1664 - }
1665 1665  
1666 - .hero-inner {
1667 - max-width: 860px;
1668 - margin: 0 auto;
1669 - display: flex;
1670 - flex-direction: column;
1671 - align-items: center;
1672 - }
1673 -
1674 - h1 {
1675 - max-width: 790px;
1676 - margin-left: auto;
1677 - margin-right: auto;
1678 - line-height: 1.18;
1679 - }
1680 -
1681 - .lead {
1682 - max-width: 820px;
1683 - font-size: 19px;
1684 - line-height: 1.55;
1685 - margin-top: 12px;
1686 - }
1687 -
1688 - .benefits {
1689 - display: flex;
1690 - flex-wrap: wrap;
1691 - justify-content: center;
1692 - list-style: none;
1693 - padding: 0;
1694 - margin: 14px 0 0;
1695 - color: @muted;
1696 - font-size: 14px;
1697 -
1698 - li + li::before {
1699 - content: "•";
1700 - margin: 0 6px;
1701 - }
1702 - }
1703 -}
1704 -
1705 -.hero-kicker {
1706 - display: inline-flex;
1707 - align-items: center;
1708 - gap: 8px;
1709 - color: @brand;
1710 - background: fade(@brand, 8%);
1711 - border: 1px solid fade(@brand, 18%);
1712 - border-radius: 999px;
1713 - padding: 6px 12px;
1714 - margin-bottom: 14px;
1715 - font-size: 13px;
1716 - font-weight: 700;
1717 -}
1718 -
1719 -.hero-actions,
1720 -#hero-cta {
1721 - display: flex;
1722 - gap: 12px;
1723 - flex-wrap: wrap;
1724 - justify-content: center;
1725 - margin-top: 22px;
1726 -}
1727 -
1728 -/* ========== Trust Strip ========== */
1729 -
1730 -.trust-strip {
1731 - padding: 18px 0;
1732 - border-top: 1px solid @line;
1733 - background: #fff;
1734 -
1735 - ul {
1736 - max-width: 960px;
1737 - margin: 0 auto;
1738 - padding: 0;
1739 - list-style: none;
1740 - display: flex;
1741 - justify-content: center;
1742 - gap: 22px;
1743 - flex-wrap: wrap;
1744 - color: @muted;
1745 - font-size: 13px;
1746 - }
1747 -
1748 - li {
1749 - display: flex;
1750 - align-items: center;
1751 - gap: 7px;
1752 - }
1753 -
1754 - i {
1755 - color: @brand;
1756 - }
1757 -}
1758 -
1759 -/* ========== Reusable Grids ========== */
1760 -
1761 -.card-grid,
1762 -.pathways,
1763 -.services-grid,
1764 -.resource-grid,
1765 -.widgets {
1766 - display: grid;
1767 - grid-gap: 18px;
1768 - margin-left: auto;
1769 - margin-right: auto;
1770 -}
1771 -
1772 -.card-grid,
1773 -.pathways,
1774 -.services-grid {
1775 - grid-template-columns: repeat(3, minmax(0, 1fr));
1776 - max-width: 1040px;
1777 - margin-top: 22px;
1778 -}
1779 -
1780 -.resource-grid {
1781 - grid-template-columns: repeat(2, minmax(0, 1fr));
1782 - max-width: 1040px;
1783 - margin-top: 22px;
1784 -}
1785 -
1786 -.widgets {
1787 - grid-template-columns: repeat(4, minmax(0, 1fr));
1788 - max-width: 1040px;
1789 - margin-top: 20px;
1790 -}
1791 -
1792 -.card-grid > *,
1793 -.pathways > *,
1794 -.services-grid > *,
1795 -.resource-grid > *,
1796 -.widgets > * {
1797 - min-width: 0;
1798 -}
1799 -
1800 -/* ========== Shared Card Style ========== */
1801 -
1802 -.widget,
1803 -.pathway-card,
1804 -.service-card,
1805 -.resource-card {
1806 - background: #fff;
1807 - border: 1px solid @line;
1808 - border-radius: @radius;
1809 - box-shadow: @shadow-sm;
1810 -}
1811 -
1812 -/* ========== Small Widgets ========== */
1813 -
1814 -.widget {
1815 - padding: 18px;
1816 - display: flex;
1817 - flex-direction: column;
1818 - height: 100%;
1819 -
1820 - .icon {
1821 - display: flex;
1822 - align-items: center;
1823 - gap: 10px;
1824 - padding-bottom: 8px;
1825 - margin-bottom: 10px;
1826 - border-bottom: 1px solid fade(@line, 70%);
1827 -
1828 - i {
1829 - color: @brand;
1830 - }
1831 -
1832 - h4 {
1234 + p {
1235 + color: @muted;
1236 + font-size: 17px;
1237 + line-height: 1.7;
1833 1833   margin: 0;
1834 - line-height: 1.25;
1835 - color: @text;
1836 1836   }
1837 1837   }
1838 1838  
1839 - p {
1840 - margin: 0;
1841 - color: @muted;
1842 - line-height: 1.45;
1242 + .resources-grid {
1243 + display: grid;
1244 + grid-template-columns: repeat(2, minmax(0, 1fr));
1245 + gap: 24px;
1246 + margin-bottom: 36px;
1843 1843   }
1844 -}
1845 1845  
1846 -/* ========== Homepage Pathway Cards ========== */
1847 -
1848 -.pathway-card {
1849 - padding: 24px;
1850 - display: flex;
1851 - flex-direction: column;
1852 - min-height: 100%;
1853 -
1854 - .card-heading {
1249 + .resource-card {
1855 1855   display: flex;
1856 - align-items: center;
1857 - gap: 14px;
1858 - margin-bottom: 14px;
1859 - }
1860 -
1861 - .pathway-icon {
1862 - width: 52px;
1863 - height: 52px;
1864 - border-radius: 50%;
1865 - display: flex;
1866 - align-items: center;
1867 - justify-content: center;
1868 - color: @brand;
1869 - background: fade(@brand, 10%);
1870 - font-size: 19px;
1871 - flex-shrink: 0;
1872 - }
1873 -
1874 - h3 {
1875 - margin: 0;
1876 - color: @text;
1877 - font-size: 22px;
1878 - line-height: 1.25;
1879 - }
1880 -
1881 - p {
1882 - color: @muted;
1883 - line-height: 1.55;
1884 - margin: 0 0 16px;
1885 - }
1886 -
1887 - ul {
1888 - margin: 0 0 22px;
1889 - padding-left: 18px;
1890 - color: @muted;
1891 - font-size: 14px;
1892 - line-height: 1.55;
1893 - }
1894 -
1895 - li {
1896 - margin: 6px 0;
1897 - }
1898 -
1899 - .card-link {
1900 - margin-top: auto;
1901 - padding-top: 4px;
1902 -
1903 - a {
1904 - color: @brand;
1905 - font-weight: 700;
1906 - text-decoration: underline;
1907 -
1908 - &:hover,
1909 - &:focus {
1910 - color: @brand-strong;
1911 - }
1912 - }
1913 - }
1914 -}
1915 -
1916 -.industry-trust-section {
1917 - background:
1918 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
1919 -
1920 - .industry-trust-panel {
1921 - max-width: 1040px;
1922 - margin: 0 auto;
1923 - padding: 30px 28px;
1924 - border: 1px solid fade(@brand, 16%);
1251 + gap: 18px;
1252 + background: #fff;
1253 + border: 1px solid @line;
1925 1925   border-radius: @radius;
1926 - background:
1927 - radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
1928 1928   box-shadow: @shadow-sm;
1929 - text-align: center;
1256 + padding: 24px;
1930 1930   }
1931 1931  
1932 - h2 {
1933 - margin-bottom: 12px;
1934 - }
1935 -
1936 - .section-intro {
1937 - margin-bottom: 20px;
1938 - max-width: 820px;
1939 - }
1940 -
1941 - .industry-tags {
1942 - max-width: 880px;
1943 - margin: 0 auto;
1259 + .resource-card-icon {
1260 + flex: 0 0 46px;
1261 + width: 46px;
1262 + height: 46px;
1263 + border-radius: 14px;
1264 + background: @brand-soft;
1265 + color: @brand-strong;
1944 1944   display: flex;
1945 - flex-wrap: wrap;
1267 + align-items: center;
1946 1946   justify-content: center;
1947 - gap: 10px;
1269 + font-size: 20px;
1948 1948   }
1949 1949  
1950 - .industry-tags span {
1951 - display: inline-flex;
1952 - align-items: center;
1953 - padding: 7px 12px;
1954 - border: 1px solid fade(@brand, 20%);
1955 - border-radius: 999px;
1956 - background: #fff;
1957 - color: @text;
1272 + .resource-card-label {
1273 + color: @brand-strong;
1958 1958   font-size: 13px;
1959 - font-weight: 600;
1960 - line-height: 1.2;
1961 - box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
1275 + font-weight: 700;
1276 + text-transform: uppercase;
1277 + letter-spacing: .04em;
1278 + margin-bottom: 8px;
1962 1962   }
1963 1963  
1964 - .industry-support {
1965 - max-width: 820px;
1966 - margin: 22px auto 0;
1967 - color: @muted;
1968 - font-size: 16px;
1969 - line-height: 1.6;
1970 - }
1971 -}
1972 -
1973 -@media (max-width: 640px) {
1974 - .industry-trust-section {
1975 - .industry-trust-panel {
1976 - padding: 24px 18px;
1977 - }
1978 -
1979 - .industry-tags {
1980 - gap: 8px;
1981 - }
1982 -
1983 - .industry-tags span {
1984 - font-size: 12px;
1985 - padding: 6px 10px;
1986 - }
1987 - }
1988 -}
1989 -
1990 -/* ========== Services ========== */
1991 -
1992 -.services {
1993 - .services-grid {
1994 - max-width: 1040px;
1995 - }
1996 -
1997 - .service {
1998 - display: flex;
1999 - align-items: flex-start;
2000 - gap: 16px;
2001 - padding: 22px;
2002 - background: #fff;
2003 - border: 1px solid @line;
2004 - border-radius: @radius;
2005 - box-shadow: @shadow-sm;
2006 -
2007 - .service-icon {
2008 - width: 46px;
2009 - height: 46px;
2010 - border-radius: 50%;
2011 - display: flex;
2012 - align-items: center;
2013 - justify-content: center;
2014 - font-size: 18px;
2015 - color: @brand;
2016 - background: fade(@brand, 10%);
2017 - flex-shrink: 0;
2018 - margin-top: 2px;
2019 - }
2020 -
2021 - .service-body {
2022 - h4 {
2023 - margin: 0 0 6px;
2024 - font-size: 18px;
2025 - line-height: 1.25;
2026 - font-weight: 800;
2027 - color: @text;
2028 - }
2029 -
2030 - p {
2031 - margin: 0 0 8px;
2032 - color: @muted;
2033 - line-height: 1.5;
2034 - }
2035 -
2036 - ul {
2037 - margin: 9px 0 0;
2038 - padding-left: 18px;
2039 - color: @muted;
2040 - font-size: 13px;
2041 - line-height: 1.5;
2042 - }
2043 -
2044 - li {
2045 - margin: 4px 0;
2046 - }
2047 - }
2048 - }
2049 -}
2050 -
2051 -/* ========== Split / Process Section ========== */
2052 -
2053 -.split-section {
2054 - background:
2055 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
2056 -}
2057 -
2058 -.split-grid {
2059 - display: grid;
2060 - grid-template-columns: 1.1fr .9fr;
2061 - grid-gap: 36px;
2062 - max-width: 1040px;
2063 - margin: 0 auto;
2064 - align-items: center;
2065 -}
2066 -
2067 -.split-copy {
2068 - h2 {
2069 - text-align: left;
2070 - margin-top: 0;
2071 - }
2072 -
2073 - p {
2074 - color: @muted;
2075 - line-height: 1.6;
2076 - }
2077 -}
2078 -
2079 -.process-list {
2080 - counter-reset: process;
2081 - margin: 0;
2082 - padding: 0;
2083 - list-style: none;
2084 -
2085 - li {
2086 - counter-increment: process;
2087 - position: relative;
2088 - padding: 16px 16px 16px 58px;
2089 - margin-bottom: 12px;
2090 - background: #fff;
2091 - border: 1px solid @line;
2092 - border-radius: @radius;
2093 - box-shadow: @shadow-sm;
2094 - color: @muted;
2095 - line-height: 1.5;
2096 -
2097 - &:before {
2098 - content: counter(process);
2099 - position: absolute;
2100 - left: 16px;
2101 - top: 16px;
2102 - width: 28px;
2103 - height: 28px;
2104 - border-radius: 50%;
2105 - background: fade(@brand, 10%);
2106 - color: @brand;
2107 - display: flex;
2108 - align-items: center;
2109 - justify-content: center;
2110 - font-weight: 800;
2111 - }
2112 -
2113 - strong {
2114 - display: block;
2115 - color: @text;
2116 - margin-bottom: 3px;
2117 - }
2118 - }
2119 -}
2120 -
2121 -/* ========== Resources ========== */
2122 -
2123 -.resource-strip {
2124 - background: @brand-bg;
2125 -}
2126 -
2127 -.resource-card {
2128 - padding: 20px;
2129 -
2130 - h4 {
2131 - margin: 0 0 8px;
2132 - color: @text;
2133 - font-size: 18px;
1281 + .resource-card h2 {
1282 + font-size: 22px;
2134 2134   line-height: 1.25;
2135 - }
2136 -
2137 - p {
2138 - color: @muted;
2139 2139   margin: 0 0 12px;
2140 - line-height: 1.5;
2141 2141   }
2142 2142  
2143 - a {
2144 - color: @brand;
2145 - font-weight: 700;
2146 - }
2147 -}
1287 + .resource-card h2 a {
1288 + color: @text;
1289 + text-decoration: none;
2148 2148  
2149 -/* ========== Homepage Resource Strip ========== */
2150 -
2151 -.homepage-resource-strip {
2152 - background:
2153 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
2154 -
2155 - .resource-grid {
2156 - max-width: 1040px;
2157 - margin: 22px auto 0;
2158 - display: grid;
2159 - grid-template-columns: repeat(2, minmax(0, 1fr));
2160 - grid-gap: 22px;
2161 - align-items: stretch;
1291 + &:hover {
1292 + color: @brand-strong;
1293 + text-decoration: none;
1294 + }
2162 2162   }
2163 2163  
2164 - .resource-card {
2165 - display: flex;
2166 - flex-direction: column;
2167 - min-width: 0;
2168 - min-height: 100%;
2169 - padding: 26px;
2170 - }
2171 -
2172 - .resource-card h4 {
2173 - margin: 0 0 10px;
2174 - color: @text;
2175 - font-size: 21px;
2176 - line-height: 1.25;
2177 - font-weight: 700;
2178 - }
2179 -
2180 2180   .resource-card p {
2181 - margin: 0 0 18px;
2182 2182   color: @muted;
2183 2183   font-size: 15px;
2184 - line-height: 1.6;
1300 + line-height: 1.65;
1301 + margin: 0 0 16px;
2185 2185   }
2186 2186  
2187 - .resource-card a {
2188 - margin-top: auto;
2189 - color: @brand;
1304 + .resource-card-link {
1305 + color: @brand-strong;
2190 2190   font-weight: 700;
2191 - text-decoration: underline;
1307 + text-decoration: none;
2192 2192  
2193 - &:hover,
2194 - &:focus {
2195 - color: @brand-strong;
2196 - }
2197 - }
2198 -}
2199 -
2200 -@media (max-width: 980px) {
2201 - .homepage-resource-strip {
2202 - .resource-grid {
2203 - grid-template-columns: 1fr;
2204 - }
2205 - }
2206 -}
2207 -
2208 -@media (max-width: 640px) {
2209 - .homepage-resource-strip {
2210 - .resource-card {
2211 - padding: 22px;
2212 - }
2213 -
2214 - .resource-card h4 {
2215 - font-size: 19px;
2216 - }
2217 - }
2218 -}
2219 -
2220 -/* ========== CTA ========== */
2221 -
2222 -.cta-section {
2223 - padding: @section-padding;
2224 -
2225 - .contact-inline {
2226 - margin: 0;
2227 - color: @muted;
2228 -
2229 - a {
1309 + &:hover {
2230 2230   color: @brand;
1311 + text-decoration: none;
2231 2231   }
2232 2232   }
2233 -}
2234 2234  
2235 -.cta-panel {
2236 - max-width: 860px;
2237 - margin: 0 auto;
2238 - padding: 32px;
2239 - border-radius: @radius;
2240 - border: 1px solid fade(@brand, 20%);
2241 - background:
2242 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
2243 - box-shadow: @shadow-sm;
2244 - text-align: center;
2245 -
2246 - h2 {
2247 - margin-top: 0;
2248 - }
2249 -
2250 - p {
2251 - color: @muted;
2252 - line-height: 1.55;
2253 - }
2254 -}
2255 -
2256 -.resource-inline-cta {
2257 - display: flex;
2258 - align-items: center;
2259 - justify-content: space-between;
2260 - gap: 22px;
2261 - margin: 30px 0;
2262 - padding: 20px 22px;
2263 - border: 1px solid fade(@brand, 22%);
2264 - border-radius: @radius;
2265 - background: @brand-bg;
2266 - box-shadow: @shadow-sm;
2267 -
2268 - p {
2269 - margin: 0;
2270 - color: @muted;
2271 - line-height: 1.55;
2272 - }
2273 -
2274 - strong {
2275 - color: @text;
2276 - }
2277 -
2278 - .btn {
2279 - flex-shrink: 0;
2280 - }
2281 -}
2282 -
2283 -@media (max-width: 767px) {
2284 - .resource-inline-cta {
2285 - display: block;
1315 + .resources-next {
1316 + max-width: 820px;
1317 + margin: 0 auto 32px;
2286 2286   text-align: center;
2287 2287  
2288 - p {
2289 - margin-bottom: 14px;
1320 + h2 {
1321 + font-size: 26px;
1322 + margin: 0 0 10px;
2290 2290   }
2291 2291  
2292 - .btn {
2293 - display: inline-block;
2294 - margin-left: auto;
2295 - margin-right: auto;
1325 + p {
1326 + color: @muted;
1327 + font-size: 16px;
1328 + line-height: 1.7;
1329 + margin: 0;
2296 2296   }
2297 2297   }
2298 2298  }
2299 2299  
2300 -/* ========== Responsive ========== */
1334 +@media (max-width: 767px) {
1335 + .resources-index-page {
1336 + padding: @section-padding-mobile;
2301 2301  
2302 -@media (max-width: 980px) {
2303 - .widgets,
2304 - .pathways,
2305 - .services-grid,
2306 - .resource-grid {
2307 - grid-template-columns: repeat(2, minmax(0, 1fr));
2308 - }
2309 -
2310 - .split-grid {
2311 - grid-template-columns: 1fr;
2312 - }
2313 -
2314 - .split-copy h2 {
2315 - text-align: center;
2316 - }
2317 -}
2318 -
2319 -@media (max-width: 760px) {
2320 - section[id] {
2321 - scroll-margin-top: 132px;
2322 - }
2323 -
2324 - .header-inner {
2325 - min-height: auto;
2326 - padding-top: 14px;
2327 - padding-bottom: 14px;
2328 - flex-direction: column;
2329 - align-items: center;
2330 - gap: 12px;
2331 - }
2332 -
2333 - .site-nav {
2334 - width: 100%;
2335 - justify-content: center;
2336 - flex-wrap: wrap;
2337 - gap: 10px 16px;
2338 - font-size: 14px;
2339 -
2340 - .nav-cta {
2341 - padding: 7px 12px;
1338 + .resources-intro {
1339 + text-align: left;
1340 + margin-bottom: 24px;
2342 2342   }
2343 - }
2344 2344  
2345 - .hero.hero-centered {
2346 - min-height: 280px;
2347 - }
2348 -
2349 - .hero {
2350 - .lead {
2351 - font-size: 17px;
1343 + .resources-grid {
1344 + grid-template-columns: 1fr;
1345 + gap: 18px;
2352 2352   }
2353 2353  
2354 - .benefits {
2355 - gap: 4px 10px;
2356 -
2357 - li + li::before {
2358 - content: none;
2359 - }
1348 + .resource-card {
1349 + padding: 20px;
2360 2360   }
2361 - }
2362 -}
2363 2363  
2364 -@media (max-width: 640px) {
2365 - section {
2366 - padding: @section-padding-mobile;
2367 - }
2368 -
2369 - .widgets,
2370 - .pathways,
2371 - .services-grid,
2372 - .resource-grid {
2373 - grid-template-columns: 1fr;
2374 - }
2375 -
2376 - .pathway-card,
2377 - .services .service,
2378 - .resource-card,
2379 - .widget {
2380 - padding: 20px;
2381 - }
2382 -
2383 - .services .service {
2384 - gap: 14px;
2385 - }
2386 -
2387 - .cta-panel {
2388 - padding: 24px 20px;
2389 - }
2390 -}
2391 -
2392 -/* ========== Resource / Article Pages ========== */
2393 -
2394 -.resource-page {
2395 - padding-top: 0;
2396 -}
2397 -
2398 -.resource-header {
2399 - padding: @section-padding;
2400 - border-top: none;
2401 - background:
2402 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
2403 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
2404 -
2405 - h1 {
2406 - margin: 0 auto 14px;
2407 - text-align: center;
2408 - line-height: 1.18;
2409 - }
2410 -
2411 - .resource-summary {
2412 - max-width: 780px;
2413 - margin: 0 auto;
2414 - color: @muted;
2415 - text-align: center;
2416 - font-size: 18px;
2417 - line-height: 1.55;
2418 - }
2419 -}
2420 -
2421 -.resource-layout {
2422 - display: block;
2423 - max-width: 1080px;
2424 - margin: 0 auto;
2425 - padding-top: 28px;
2426 -}
2427 -
2428 -.resource-layout::after {
2429 - content: "";
2430 - display: block;
2431 - clear: both;
2432 -}
2433 -
2434 -.resource-content {
2435 - color: @text;
2436 - font-size: 16px;
2437 - line-height: 1.68;
2438 -
2439 - h2 {
2440 - text-align: left;
2441 - margin: 34px 0 12px;
2442 - line-height: 1.28;
2443 - }
2444 -
2445 - h3 {
2446 - margin: 24px 0 8px;
2447 - line-height: 1.3;
2448 - }
2449 -
2450 - p {
2451 - margin: 0 0 16px;
2452 - }
2453 -
2454 - ul,
2455 - ol {
2456 - margin: 0 0 18px;
2457 - padding-left: 22px;
2458 - }
2459 -
2460 - li {
2461 - margin: 6px 0;
2462 - }
2463 -
2464 - strong {
2465 - color: @text;
2466 - }
2467 -}
2468 -
2469 -.resource-note {
2470 - border-left: 4px solid @brand;
2471 - background: @brand-bg;
2472 - padding: 16px 18px;
2473 - margin: 22px 0;
2474 - border-radius: 0 @radius @radius 0;
2475 -
2476 - p:last-child {
2477 - margin-bottom: 0;
2478 - }
2479 -}
2480 -
2481 -.resource-note.related-resources {
2482 - p {
2483 - margin-bottom: 10px;
2484 - }
2485 -
2486 - ul {
2487 - margin: 0;
2488 - padding-left: 20px;
2489 - }
2490 -
2491 - li {
2492 - margin: 6px 0;
2493 - color: @muted;
2494 - }
2495 -}
2496 -
2497 -.resource-faq-item {
2498 - display: flow-root;
2499 - border-bottom: 1px solid @line;
2500 - padding: 12px 0;
2501 -
2502 - summary {
2503 - cursor: pointer;
2504 - font-weight: 700;
2505 - color: @text;
2506 - line-height: 1.4;
2507 - }
2508 -
2509 - summary:hover,
2510 - summary:focus {
2511 - color: @brand-strong;
2512 - }
2513 -
2514 - p {
2515 - margin: 10px 0 4px;
2516 - color: @muted;
2517 - }
2518 -}
2519 -
2520 -.resource-checklist {
2521 - margin: 18px 0 24px;
2522 - padding: 0;
2523 - list-style: none;
2524 -
2525 - li {
2526 - position: relative;
2527 - padding: 10px 0 10px 34px;
2528 - border-bottom: 1px solid @line;
2529 -
2530 - &:before {
2531 - content: "\f00c";
2532 - font-family: FontAwesome;
2533 - position: absolute;
2534 - left: 0;
2535 - top: 11px;
2536 - color: @brand;
1352 + .resource-card h2 {
1353 + font-size: 20px;
2537 2537   }
2538 - }
2539 -}
2540 2540  
2541 -.resource-sidebar {
2542 - float: right;
2543 - width: 280px;
2544 - margin-left: 42px;
2545 - margin-bottom: 28px;
2546 - position: sticky;
2547 - top: 96px;
2548 - border: 1px solid @line;
2549 - border-radius: @radius;
2550 - padding: 18px;
2551 - background: #fff;
2552 - box-shadow: @shadow-sm;
2553 -
2554 - h4 {
2555 - margin: 0 0 10px;
2556 - }
2557 -
2558 - ul {
2559 - margin: 0;
2560 - padding-left: 18px;
2561 - color: @muted;
2562 - }
2563 -
2564 - li {
2565 - margin: 8px 0;
2566 - }
2567 -
2568 - a {
2569 - color: @brand;
2570 - font-weight: 600;
2571 - }
2572 -}
2573 -
2574 -.resource-cta {
2575 - display: flex;
2576 - flex-direction: column;
2577 - align-items: center;
2578 - text-align: center;
2579 -
2580 - max-width: 820px;
2581 - margin: 42px auto 0;
2582 - padding: 28px 30px;
2583 - border: 1px solid fade(@brand, 20%);
2584 - border-radius: @radius;
2585 - background: @brand-bg;
2586 -
2587 - h3 {
2588 - margin-top: 0;
2589 - margin-bottom: 10px;
2590 - }
2591 -
2592 - p {
2593 - max-width: 680px;
2594 - margin-left: auto;
2595 - margin-right: auto;
2596 - color: @muted;
2597 - }
2598 -
2599 - .btn {
2600 - margin-top: 8px;
2601 - }
2602 -}
2603 -
2604 -.resource-note,
2605 -.resource-checklist,
2606 -.resource-cta {
2607 - display: flow-root;
2608 -}
2609 -
2610 -@media (max-width: 767px) {
2611 - .resource-cta {
2612 - padding: 24px 20px;
2613 - }
2614 -}
2615 -
2616 -@media (max-width: 900px) {
2617 - .resource-layout {
2618 - padding-top: 22px;
2619 - }
2620 -
2621 - .resource-sidebar {
2622 - float: none;
2623 - width: 100%;
2624 - margin-left: 0;
2625 - margin-bottom: 24px;
2626 - position: static;
2627 - }
2628 -}
2629 -
2630 -/* ========== Products / Extensions Pages ========== */
2631 -
2632 -.product-index-section {
2633 - padding: @section-padding;
2634 -
2635 - h2 {
2636 - margin-bottom: 10px;
2637 - }
2638 -}
2639 -
2640 -.product-card-grid {
2641 - max-width: 840px;
2642 - margin: 22px auto 0;
2643 - display: grid;
2644 - grid-template-columns: 1fr;
2645 - grid-gap: 18px;
2646 -}
2647 -
2648 -.product-card {
2649 - background: #fff;
2650 - border: 1px solid @line;
2651 - border-radius: @radius;
2652 - box-shadow: @shadow-sm;
2653 - padding: 28px;
2654 - display: grid;
2655 - grid-template-columns: 68px 1fr;
2656 - grid-gap: 22px;
2657 - align-items: start;
2658 -
2659 - .product-card-icon {
2660 - width: 58px;
2661 - height: 58px;
2662 - border-radius: 50%;
2663 - background: fade(@brand, 10%);
2664 - border: 1px solid fade(@brand, 20%);
2665 - color: @brand;
2666 - display: flex;
2667 - align-items: center;
2668 - justify-content: center;
2669 - font-size: 22px;
2670 - flex-shrink: 0;
2671 - }
2672 -
2673 - h3 {
2674 - margin: 0 0 10px;
2675 - color: @text;
2676 - font-size: 23px;
2677 - line-height: 1.25;
2678 - font-weight: 800;
2679 - }
2680 -
2681 - p {
2682 - color: @muted;
2683 - line-height: 1.6;
2684 - }
2685 -
2686 - .card-link {
2687 - margin: 0;
2688 -
2689 - a {
2690 - font-weight: 700;
1356 + .resources-next {
1357 + text-align: left;
2691 2691   }
2692 2692   }
2693 2693  }
2694 -
2695 -.product-card-kicker {
2696 - margin-bottom: 10px;
2697 - padding: 5px 10px;
2698 - font-size: 12px;
2699 - text-transform: uppercase;
2700 - letter-spacing: .04em;
2701 -}
2702 -
2703 -.product-highlights {
2704 - margin: 14px 0 20px;
2705 - padding-left: 18px;
2706 - color: @muted;
2707 -
2708 - li {
2709 - margin: 6px 0;
2710 - line-height: 1.45;
2711 - }
2712 -}
2713 -
2714 -/* ========== Individual Product Pages ========== */
2715 -
2716 -.product-layout {
2717 - display: grid;
2718 - grid-template-columns: 1.1fr .9fr;
2719 - grid-gap: 36px;
2720 - max-width: 1040px;
2721 - margin: 0 auto;
2722 - align-items: start;
2723 -}
2724 -
2725 -.product-summary-card,
2726 -.product-info-card,
2727 -.product-gallery-panel {
2728 - background: #fff;
2729 - border: 1px solid @line;
2730 - border-radius: @radius;
2731 - box-shadow: @shadow-sm;
2732 -}
2733 -
2734 -.product-summary-card {
2735 - padding: 26px;
2736 -
2737 - h2 {
2738 - text-align: left;
2739 - margin-top: 0;
2740 - }
2741 -
2742 - p {
2743 - color: @muted;
2744 - line-height: 1.6;
2745 - }
2746 -
2747 - p:last-child {
2748 - margin-bottom: 0;
2749 - }
2750 -}
2751 -
2752 -.product-info-card {
2753 - padding: 22px;
2754 -
2755 - h3 {
2756 - margin-top: 0;
2757 - margin-bottom: 12px;
2758 - }
2759 -
2760 - ul {
2761 - margin: 0;
2762 - padding-left: 20px;
2763 - color: @muted;
2764 - }
2765 -
2766 - li {
2767 - margin: 8px 0;
2768 - line-height: 1.45;
2769 - }
2770 -}
2771 -
2772 -.product-feature-grid {
2773 - display: grid;
2774 - grid-template-columns: repeat(3, minmax(0, 1fr));
2775 - grid-gap: 18px;
2776 - max-width: 1040px;
2777 - margin: 22px auto 0;
2778 -}
2779 -
2780 -.product-feature {
2781 - background: #fff;
2782 - border: 1px solid @line;
2783 - border-radius: @radius;
2784 - box-shadow: @shadow-sm;
2785 - padding: 22px;
2786 -
2787 - .feature-heading {
2788 - display: flex;
2789 - align-items: center;
2790 - gap: 14px;
2791 - margin-bottom: 14px;
2792 - }
2793 -
2794 - .feature-icon {
2795 - width: 46px;
2796 - height: 46px;
2797 - border-radius: 50%;
2798 - background: fade(@brand, 10%);
2799 - color: @brand;
2800 - display: flex;
2801 - align-items: center;
2802 - justify-content: center;
2803 - font-size: 18px;
2804 - flex-shrink: 0;
2805 - }
2806 -
2807 - h3 {
2808 - margin: 0;
2809 - color: @text;
2810 - font-size: 18px;
2811 - line-height: 1.25;
2812 - }
2813 -
2814 - p {
2815 - margin: 0;
2816 - color: @muted;
2817 - line-height: 1.5;
2818 - }
2819 -}
2820 -
2821 -.product-gallery-panel {
2822 - max-width: 1040px;
2823 - margin: 20px auto 0;
2824 - padding: 26px;
2825 -
2826 - h2 {
2827 - margin-top: 0;
2828 - text-align: center;
2829 - }
2830 -
2831 - .gallery-note {
2832 - max-width: 700px;
2833 - margin: 0 auto 18px;
2834 - color: @muted;
2835 - text-align: center;
2836 - line-height: 1.55;
2837 - }
2838 -}
2839 -
2840 -.product-gallery-placeholder {
2841 - min-height: 260px;
2842 - padding: 28px;
2843 - border: 1px dashed fade(@brand, 40%);
2844 - border-radius: @radius;
2845 - background: fade(@brand, 5%);
2846 - color: @muted;
2847 - text-align: center;
2848 - display: flex;
2849 - align-items: center;
2850 - justify-content: center;
2851 -}
2852 -
2853 -.product-section-muted {
2854 - background:
2855 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
2856 -}
2857 -
2858 -@media (max-width: 980px) {
2859 - .product-layout,
2860 - .product-feature-grid {
2861 - grid-template-columns: 1fr;
2862 - }
2863 -
2864 - .product-summary-card h2 {
2865 - text-align: center;
2866 - }
2867 -}
2868 -
2869 -@media (max-width: 640px) {
2870 - .product-card {
2871 - grid-template-columns: 1fr;
2872 - padding: 22px;
2873 - text-align: left;
2874 -
2875 - .product-card-icon {
2876 - margin-bottom: 2px;
2877 - }
2878 - }
2879 -
2880 - .product-summary-card,
2881 - .product-info-card,
2882 - .product-feature,
2883 - .product-gallery-panel {
2884 - padding: 20px;
2885 - }
2886 -}
2887 -
2888 -/* ========== Resources Index ========== */
2889 -
2890 -.resources-index-page {
2891 - background: #fff;
2892 -
2893 - .services-grid {
2894 - grid-template-columns: repeat(2, minmax(0, 1fr));
2895 - }
2896 -}
2897 -
2898 -@media (max-width: 980px) {
2899 - .resources-index-page {
2900 - .services-grid {
2901 - grid-template-columns: 1fr;
2902 - }
2903 - }
2904 -}
2905 -
2906 -@media (max-width: 767px) {
2907 - .resources-index-page {
2908 - padding: @section-padding-mobile;
2909 - }
2910 -}
2911 -
2912 -.resource-faq-item {
2913 - border-bottom: 1px solid @line;
2914 - padding: 12px 0;
2915 -
2916 - summary {
2917 - cursor: pointer;
2918 - font-weight: 700;
2919 - color: @text;
2920 - }
2921 -
2922 - p {
2923 - margin: 10px 0 4px;
2924 - color: @muted;
2925 - }
2926 -}
2927 - color: @text;
2928 - }
2929 -
2930 - p {
2931 - margin: 10px 0 4px;
2932 - color: @muted;
2933 - }
2934 -}
XWiki.StyleSheetExtension[1]
code
... ... @@ -1,8 +1,14 @@
1 1  /* ========== Agnease Public Top Menu ========== */
2 +
3 +/* Desktop alignment */
4 +#menuview .navbar-nav {
5 + float: right !important;
6 +}
7 +
2 2  /* Top-level menu items */
3 3  
4 -#menuview .agnease-menu-item,
5 -#menuview .agnease-menu-link {
10 +.agnease-menu-item,
11 +.agnease-menu-link {
6 6   > a,
7 7   > .dropdown-toggle {
8 8   color: @brand;
... ... @@ -11,7 +11,6 @@
11 11   padding-left: 16px;
12 12   padding-right: 16px;
13 13   text-decoration: none;
14 - background: transparent;
15 15   }
16 16  
17 17   > a:hover,
... ... @@ -22,7 +22,6 @@
22 22   color: @brand-strong;
23 23   text-decoration: none;
24 24   outline: none;
25 - background: transparent;
26 26   }
27 27  
28 28   .caret {
... ... @@ -43,7 +43,7 @@
43 43  
44 44  /* Dropdown panel */
45 45  
46 -#menuview .agnease-dropdown {
50 +.agnease-dropdown {
47 47   min-width: 310px;
48 48   padding: 10px 8px;
49 49   border: 1px solid fade(@brand, 18%);
... ... @@ -62,7 +62,6 @@
62 62   font-weight: 600;
63 63   line-height: 1.3;
64 64   text-decoration: none;
65 - background: transparent;
66 66  
67 67   i {
68 68   width: 20px;
... ... @@ -78,7 +78,6 @@
78 78   color: @brand-strong;
79 79   text-decoration: none;
80 80   outline: none;
81 - background: transparent;
82 82  
83 83   i {
84 84   color: @brand-strong;
... ... @@ -88,7 +88,6 @@
88 88  
89 89   > .active > a {
90 90   color: @brand-strong;
91 - background: transparent;
92 92  
93 93   i {
94 94   color: @brand-strong;
... ... @@ -104,33 +104,23 @@
104 104  /* Mobile */
105 105  
106 106  @media (max-width: 767px) {
107 - #menuview {
108 + .site-nav {
108 108   margin-left: 0;
109 - width: 100%;
110 + justify-content: center;
111 + flex-wrap: wrap;
110 110   }
111 111  
112 - #menuview .navbar-nav {
113 - float: none;
114 - margin: 0;
115 - width: 100%;
116 - text-align: center;
114 + .agnease-menu-item,
115 + .agnease-menu-link {
116 + > a,
117 + > .dropdown-toggle {
118 + font-size: 16px;
119 + padding-top: 9px;
120 + padding-bottom: 9px;
121 + }
117 117   }
118 118  
119 - #menuview .navbar-nav > li {
120 - float: none;
121 - display: inline-block;
122 - }
123 -
124 - #menuview .navbar-nav > li.agnease-menu-item > a,
125 - #menuview .navbar-nav > li.agnease-menu-link > a,
126 - #menuview .navbar-nav > li.agnease-menu-item > .dropdown-toggle,
127 - #menuview .navbar-nav > li.agnease-menu-link > .dropdown-toggle {
128 - font-size: 16px;
129 - padding: 10px 10px;
130 - text-align: center;
131 - }
132 -
133 - #menuview .agnease-dropdown {
124 + .agnease-dropdown {
134 134   min-width: 0;
135 135   width: 100%;
136 136   padding: 4px 8px 8px 18px;
... ... @@ -138,7 +138,6 @@
138 138   border-radius: 0;
139 139   box-shadow: none;
140 140   background: transparent;
141 - text-align: left;
142 142  
143 143   > li > a {
144 144   padding: 8px 10px;
XWiki.XWikiRights[0]
allow
... ... @@ -1,0 +1,1 @@
1 +Allow
groups
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiAllGroup
levels
... ... @@ -1,0 +1,1 @@
1 +view
users
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest