Changes for page Public Web Site

Summary

• Page properties (3 modified, 0 added, 0 removed)
• Attachments (0 modified, 0 added, 1 removed)
  • agnease-xwiki-hero.png
• Objects (1 modified, 1 added, 2 removed)
  • Agnease.Code.SEODetailsClass[0]
  • XWiki.StyleSheetExtension[0]
  • XWiki.StyleSheetExtension[1]
  • XWiki.XWikiRights[0]

Details

Page properties

Default language

...	...	@@ -1,0 +1,1 @@
	1	+en

Hidden

...	...	@@ -1,1 +1,1 @@
1		-true
	1	+false

Content

...	...	@@ -2,258 +2,182 @@
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		-
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		-#*
	5	+ ## HERO
44	44	<section class="hero hero-centered" aria-labelledby="hero-title">
45	45	<div class="container hero-inner">
46		- <h1 id="hero-title">Professional XWiki consulting and engineering</h1>
47		-
48		- <p class="lead">
49		- Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical
50		- engineering support, custom development, integrations and long-term care.
51		- </p>
52		-
	8	+ <h1 id="hero-title">Keep Your XWiki Platform Secure, Stable and Up-to-Date</h1>
	9	+ <p class="lead">Helping organizations safely upgrade and maintain their XWiki environments.</p>
53	53	<ul class="benefits">
54		- <li>XWiki LTS upgrades</li>
55		- <li>Maintenance and support</li>
56		- <li>Custom XWiki development</li>
57		- <li>Migrations and integrations</li>
	11	+ <li><a href="$xwiki.getURL('services.xwiki-upgrades')">Smooth upgrades</a></li>
	12	+ <li>Reliable support plans</li>
	13	+ <li>Custom integrations</li>
	14	+ <li>Secure, optimized platforms</li>
58	58	</ul>
59		-
60		- <div class="hero-actions">
61		- <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">Book a free discussion</a>
62		- ##<a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Request a consultation</a>
63		- <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
	16	+ <div class="hero-cta">
	17	+ <a href="mailto:alex@agnease.com">Contact Agnease</a>
	18	+ #*<a class="btn btn-primary" href="#contact" aria-label="Request a consultation" data-toggle="modal" data-target="#requestConsultation">
	19	+ Request a consultation
	20	+ </a>
	21	+ #requestConsultationModal()*#
	22	+ ##data-toggle="modal" data-target="#requestConsultationModal"
64	64	</div>
65	65	</div>
66	66	</section>
67		-*#
68		- <section class="trust-strip" aria-label="Agnease experience">
	26	+ ## WHY CHOOSE
	27	+ #set ($whySectionData = [{
	28	+ 'title': 'Stability & security',
	29	+ 'icon': 'shield',
	30	+ 'content': 'Proven upgrade steps, rollback safety, and proactive hardening keep your wiki reliable.'
	31	+ },{
	32	+ 'title': 'Predictable delivery',
	33	+ 'icon': 'check-square-o',
	34	+ 'content': 'Clear scope, defined steps, and documented results to avoid surprises.'
	35	+ },{
	36	+ 'title': 'Clean integrations',
	37	+ 'icon': 'link',
	38	+ 'content': 'Maintainable SSO, API, and system connections tailored to your environment.'
	39	+ },{
	40	+ 'title': 'Long-term support',
	41	+ 'icon': 'life-ring',
	42	+ 'content': 'Guaranteed response times, regular checks, and fast assistance when needed.'
	43	+ }])
	44	+ <section aria-labelledby="why-title">
69	69	<div class="container">
70		- <ul>
71		- <li><i class="fa fa-check-circle" aria-hidden="true"></i> 11+ years of XWiki experience</li>
72		- <li><i class="fa fa-check-circle" aria-hidden="true"></i> Upgrades, support and custom development</li>
73		- <li><i class="fa fa-check-circle" aria-hidden="true"></i> Security-aware maintenance</li>
74		- <li><i class="fa fa-check-circle" aria-hidden="true"></i> Practical long-term collaboration</li>
75		- </ul>
	46	+ <h2 id="why-title">Why choose Agnease</h2>
	47	+ <p class="lead">10+ years of XWiki expertise with structured delivery and lasting collaboration</p>
	48	+ <div class="widgets">
	49	+ #foreach ($entry in $whySectionData)
	50	+ <article class="widget">
	51	+ <div class="icon" aria-hidden="true">
	52	+ <i class="fa fa-$entry.icon"></i>
	53	+ <h4>$entry.title</h4>
	54	+ </div>
	55	+ <p>$entry.content</p>
	56	+ </article>
	57	+ #end
	58	+ </div>
76	76	</div>
77	77	</section>
78		-
79		- <section aria-labelledby="platform-title">
	61	+ ## SERVICES
	62	+ #set ($servicesSectionData = [{
	63	+ 'title': 'Upgrades',
	64	+ 'reference': 'services.xwiki-upgrades',
	65	+ 'icon': 'refresh',
	66	+ 'content': 'Stay current with the latest XWiki LTS and keep your instance reliable.',
	67	+ 'items': [
	68	+ 'Audit setup, extensions, and configurations',
	69	+ 'Test upgrades with backups and validation',
	70	+ 'Safe production rollout with minimal downtime'
	71	+ ]
	72	+ },{
	73	+ 'title': 'Maintenance, Support & Recovery',
	74	+ 'icon': 'stethoscope',
	75	+ 'content': 'Ensure long-term stability and quick response when issues appear.',
	76	+ 'items': [
	77	+ 'Monitoring and performance checks',
	78	+ 'Security patching, log analysis, triage',
	79	+ 'Issue recovery, data repair, hardening'
	80	+ ]
	81	+ },{
	82	+ 'title': 'Development & Integrations',
	83	+ 'icon': 'cogs',
	84	+ 'content': 'Extend and connect XWiki to fit your workflow and systems.',
	85	+ 'items': [
	86	+ 'Custom apps, macros, automation',
	87	+ 'SSO, REST APIs, LDAP, CRM links',
	88	+ 'Maintainable extensions for long-term use'
	89	+ ]
	90	+ },{
	91	+ 'title': 'Hosting & Deployment',
	92	+ 'icon': 'cloud',
	93	+ 'content': 'Cloud-ready environments designed for reliability and performance.',
	94	+ 'items': [
	95	+ 'Containerized deployment and TLS',
	96	+ 'Backups, restore strategy, observability',
	97	+ 'Optimization and load tuning'
	98	+ ]
	99	+ },{
	100	+ 'title': 'Migrations to XWiki',
	101	+ 'icon': 'exchange',
	102	+ 'content': 'Move from Confluence, SharePoint, or MediaWiki to XWiki with full data integrity and structure.',
	103	+ 'items': [
	104	+ 'Preserve hierarchy, attachments, and permissions',
	105	+ 'Convert macros, categories, and metadata for XWiki',
	106	+ 'Redirect old URLs and maintain SEO consistency'
	107	+ ]
	108	+ }])
	109	+ <section class="services" aria-labelledby="services-title">
80	80	<div class="container">
81		- <h2 id="platform-title">XWiki support for production knowledge platforms</h2>
82		- <p class="section-intro">
83		- XWiki often grows from a documentation space into a business-critical knowledge platform.
84		- When it supports intranets, procedures, workflows, audits or integrations, it needs structured technical care
85		- for upgrades, security, permissions and maintainability.
	111	+ <h2 id="services-title">Services</h2>
	112	+ <p class="lead">
	113	+ All the XWiki services you need, delivered with precision and care
86	86	</p>
87	87
88		- <div class="pathways">
89		- <article class="pathway-card">
90		- <div class="card-heading">
91		- <div class="pathway-icon">
92		- <i class="fa fa-refresh" aria-hidden="true"></i>
93		- </div>
94		- <h3>Upgrade XWiki safely</h3>
95		- </div>
96		- <p>
97		- Plan and execute XWiki LTS upgrades with compatibility checks, staging validation and rollback planning.
98		- </p>
99		- <ul>
100		- <li>LTS upgrade planning</li>
101		- <li>Extension and custom code review</li>
102		- <li>Staging and production validation</li>
103		- </ul>
104		- <p class="card-link">
105		- <a href="$xwiki.getURL('services.xwiki-upgrades')">View upgrade services</a>
106		- </p>
107		- </article>
	116	+ #set ($servicesSize = $servicesSectionData.size())
	117	+ <div class="services-grid">
	118	+ #foreach ($entry in $servicesSectionData)
	119	+ #set ($classes = "service")
	120	+ ## If this is the last item AND the total number is odd, center it
	121	+ #if ($foreach.count == $servicesSize && ($servicesSize % 2) == 1)
	122	+ #set ($classes = "service service-center")
	123	+ #end
108	108
109		- <article class="pathway-card">
110		- <div class="card-heading">
111		- <div class="pathway-icon">
112		- <i class="fa fa-life-ring" aria-hidden="true"></i>
	125	+ <article class="$classes">
	126	+ <div class="service-icon">
	127	+ <i class="fa fa-$entry.icon" aria-hidden="true"></i>
113	113	</div>
114		- <h3>Maintain XWiki reliably</h3>
115		- </div>
116		- <p>
117		- Keep production XWiki instances stable with troubleshooting, maintenance planning, recovery support and security-aware care.
118		- </p>
119		- <ul>
120		- <li>Troubleshooting and recovery</li>
121		- <li>Performance and log analysis</li>
122		- <li>Upgrade and maintenance planning</li>
123		- </ul>
124		- <p class="card-link">
125		- <a href="$xwiki.getURL('services.xwiki-maintenance-support')">View support services</a>
126		- </p>
127		- </article>
128		-
129		- <article class="pathway-card">
130		- <div class="card-heading">
131		- <div class="pathway-icon">
132		- <i class="fa fa-cogs" aria-hidden="true"></i>
	129	+ <div class="service-body">
	130	+ <h4>
	131	+ #if ("$!entry.reference" != '')
	132	+ <a href="$xwiki.getURL($entry.reference)">$entry.title</a>
	133	+ #else
	134	+ $entry.title
	135	+ #end
	136	+ </h4>
	137	+ <p>$entry.content</p>
	138	+ <ul>
	139	+ #foreach ($item in $entry.items)
	140	+ <li>$item</li>
	141	+ #end
	142	+ </ul>
133	133	</div>
134		- <h3>Extend XWiki for your processes</h3>
135		- </div>
136		- <p>
137		- Build custom XWiki applications, workflows, dashboards and integrations around real business needs.
138		- </p>
139		- <ul>
140		- <li>Custom XWiki applications</li>
141		- <li>Workflows and approvals</li>
142		- <li>APIs, SSO, LDAP and integrations</li>
143		- </ul>
144		- <p class="card-link">
145		- <a href="$xwiki.getURL('services.xwiki-development-integrations')">View development services</a>
146		- </p>
147		- </article>
	144	+ </article>
	145	+ #end
148	148	</div>
149	149	</div>
150	150	</section>
151		-
152		- <section class="contrast-band" aria-labelledby="industry-trust-title">
	149	+ ## CTA INLINE
	150	+ <section id="contact" class="cta-section">
153	153	<div class="container">
154		- <div class="contrast-panel">
155		- <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2>
156		-
157		- <p class="section-intro">
158		- Experience supporting XWiki platforms used in healthcare, financial services, scientific research,
159		- government institutions, transportation, software development, compliance programs and regulated environments.
160		- </p>
161		-
162		- <div class="contrast-tags" aria-label="Industries and environments supported">
163		- <span>Healthcare</span>
164		- <span>Financial services</span>
165		- <span>Scientific research</span>
166		- <span>Government institutions</span>
167		- <span>Transportation</span>
168		- <span>Software development</span>
169		- <span>Compliance programs</span>
170		- <span>Regulated environments</span>
171		- </div>
172		-
173		- <p class="contrast-support">
174		- Organizations rely on these platforms to manage documentation, workflows, compliance processes,
175		- research knowledge and critical business information. From upgrades and authentication integrations
176		- to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.
177		- </p>
178		- </div>
	152	+ <p class="text-center contact-inline">
	153	+ Need help with your XWiki? <a href="mailto:alex@agnease.com">Contact Agnease</a>.
	154	+ </p>
179	179	</div>
180	180	</section>
	157	+ {{/html}}
	158	+#end
181	181
182		- <section class="split-section" aria-labelledby="why-title">
183		- <div class="container">
184		- <div class="split-grid">
185		- <div class="split-copy">
186		- <h2 id="why-title">Why work with an XWiki specialist</h2>
187		- <p>
188		- XWiki projects often involve more than pages. Production platforms may include custom code,
189		- extensions, authentication, permissions, workflows, integrations, compliance documentation
190		- and business-critical knowledge.
191		- </p>
192		- <p>
193		- Agnease brings 11+ years of hands-on XWiki experience to help reduce risk, support long-term reliability
194		- and leave the platform easier to maintain after the work is complete.
195		- </p>
	160	+#macro(requestConsultationModal)
	161	+ <div class="modal fade" id="requestConsultation" tabindex="-1" role="dialog">
	162	+ <div class="modal-dialog">
	163	+ <div class="modal-content">
	164	+ <div class="modal-header">
	165	+ <button type="button" class="close" data-dismiss="modal">&times;</button>
	166	+ <h4 class="modal-title">Request a consultation</h4>
	167	+ </div>
	168	+ <div class="modal-body">
	169	+ <div>
	170	+ ##Need help with your XWiki? <a href="mailto:alex@agnease.com">Contact Agnease</a>
	171	+ #displayFormFromSheetCode()
196	196	</div>
197		-
198		- <ol class="process-list">
199		- <li>
200		- <strong>Review the XWiki environment</strong>
201		- Version, extensions, infrastructure, authentication, permissions, custom code and critical features.
202		- </li>
203		- <li>
204		- <strong>Define the safest next steps</strong>
205		- Scope, risks, dependencies, effort, rollback options and validation requirements.
206		- </li>
207		- <li>
208		- <strong>Implement, validate and document</strong>
209		- Controlled changes, testing, production validation and notes for future maintenance.
210		- </li>
211		- </ol>
212	212	</div>
213		- </div>
214		- </section>
215		-
216		- <section class="resource-strip homepage-resource-strip" aria-labelledby="resources-title">
217		- <div class="container">
218		- <h2 id="resources-title">XWiki resources for safer long-term maintenance</h2>
219		- <p class="section-intro">
220		- Practical articles about XWiki upgrades, customization and production platform care.
221		- </p>
222		-
223		- <div class="resource-grid">
224		- <article class="resource-card">
225		- <h4>Why upgrade your XWiki instance?</h4>
226		- <p>
227		- Learn why regular XWiki upgrades reduce security exposure, compatibility issues and long-term maintenance risk.
228		- </p>
229		- <a href="$xwiki.getURL('resources.why-upgrade-xwiki')">Read the article</a>
230		- </article>
231		-
232		- <article class="resource-card">
233		- <h4>XWiki upgrade services</h4>
234		- <p>
235		- See how XWiki upgrades can be planned, tested and validated for production instances with customizations and integrations.
236		- </p>
237		- <a href="$xwiki.getURL('services.xwiki-upgrades')">View upgrade services</a>
238		- </article>
	174	+ <div class="modal-footer">
	175	+ ##<input id="continueCategorySelection" type="button" class="btn btn-default" data-dismiss="modal"
	176	+ ## value="$escapetool.xml($services.localization.render('yesno_1'))">
239	239	</div>
240	240	</div>
241		- </section>
242		-
243		- <section class="cta-section" aria-labelledby="contact-title">
244		- <div class="container">
245		- <div class="cta-panel">
246		- <h2 id="contact-title">Need XWiki consulting or support?</h2>
247		- <p>
248		- Send your current XWiki version, the issue you are facing, or the type of project you want to build.
249		- A short description is enough to define practical next steps.
250		- </p>
251		- <a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Contact Agnease</a>
252		- </div>
253		- </div>
254		- </section>
255		-
256		- {{/html}}
	179	+ </div>
	180	+ </div>
257	257	#end
258	258
259	259	#macro (stripHTMLMacro $displayOutput)

agnease-xwiki-hero.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.Admin

Size

...	...	@@ -1,1 +1,0 @@
1		-981.8 KB

Content

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

...	...	@@ -1,35 +1,16 @@
1		-/* ========== Agnease Public Website ========== */
2		-/*
	1	+/* ========== Agnease Public Website Theme ========== */
	2	+
3	3	@brand: #00937D;
4	4	@brand-strong: #007B6A;
5		-@brand-soft: #E7FFF8;
6		-@brand-bg: #F4FCFA;
7	7	@text: #2D3A34;
8	8	@muted: #5B6B64;
9	9	@line: #E4ECE9;
	8	+@soft: #F6FBF9;
10	10	@radius: 16px;
11		-@shadow-sm: 0 6px 20px rgba(0, 0, 0, .06);
12		-@shadow: 0 12px 36px rgba(0, 0, 0, .08);
	10	+@shadow-sm: 0 6px 20px rgba(0,0,0,.06);
	11	+@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		-@section-padding: 30px 0;
29		-@section-padding-mobile: 28px 0;
30		-
31		-/* ========== Base ========== */
32		-
33	33	#mainContentArea {
34	34	padding: 0;
35	35	}
...	...	@@ -38,387 +38,203 @@
38	38	max-width: @maxw;
39	39	margin-left: auto;
40	40	margin-right: auto;
41		- padding-left: 18px;
42		- padding-right: 18px;
43	43	}
44	44
45		-html {
46		- scroll-behavior: smooth;
47		-}
48		-
49		-section {
50		- padding: @section-padding;
51		- border-top: 1px solid @line;
52		-
53		- &:first-of-type {
54		- border-top: none;
55		- }
56		-}
57		-
58		-section[id] {
59		- scroll-margin-top: 92px;
60		-}
61		-
62		-h1,
63		-h2,
64		-h3,
65		-h4 {
66		- color: @text;
67		-}
68		-
69		-h2 {
	24	+.text-center {
70	70	text-align: center;
71		- margin-top: 0;
72	72	}
73	73
74	74	.lead {
75	75	color: @muted;
76	76	text-align: center;
77		- margin-bottom: 0;
	31	+ line-height: 1.5;
78	78	}
79	79
80		-.section-intro {
	34	+.page-lead {
81	81	max-width: 760px;
82		- margin: 0 auto 22px;
83		- text-align: center;
	36	+ margin: 0 auto;
84	84	color: @muted;
85		- font-size: 16px;
86		- line-height: 1.55;
	38	+ font-size: 18px;
	39	+ line-height: 1.5;
	40	+ text-align: center;
87	87	}
88	88
89		-a {
90		- color: @brand;
	43	+section {
	44	+ padding: 32px 0;
	45	+ border-top: 1px solid @line;
91	91
92		- &:hover,
93		- &:focus {
94		- color: @brand-strong;
	47	+ &:first-of-type {
	48	+ border-top: none;
95	95	}
96	96	}
97	97
98		-/* ========== Header / Navigation ========== */
99		-
100		-.site-header {
101		- position: sticky;
102		- top: 0;
103		- z-index: 1000;
104		- background: fade(#fff, 96%);
105		- border-bottom: 1px solid fade(@line, 85%);
106		- backdrop-filter: blur(8px);
	52	+h1, h2, h3, h4 {
	53	+ color: @text;
107	107	}
108	108
109		-.header-inner {
110		- min-height: 72px;
111		- display: flex;
112		- align-items: center;
113		- justify-content: space-between;
114		- gap: 24px;
	56	+h2 {
	57	+ text-align: center;
115	115	}
116	116
117		-.site-nav {
118		- display: flex;
119		- align-items: center;
120		- gap: 22px;
121		- font-size: 15px;
	60	+/* ===== Buttons / links ===== */
122	122
123		- a {
124		- color: @text;
125		- text-decoration: none;
126		- font-weight: 600;
127		-
128		- &:hover,
129		- &:focus {
130		- color: @brand;
131		- text-decoration: none;
132		- }
133		- }
134		-
135		- .nav-cta {
136		- color: #fff;
137		- background: @brand;
138		- border: 1px solid @brand;
139		- border-radius: 6px;
140		- padding: 8px 14px;
141		-
142		- &:hover,
143		- &:focus {
144		- color: #fff;
145		- background: @brand-strong;
146		- border-color: @brand-strong;
147		- }
148		- }
	62	+.btn-main,
	63	+.btn-secondary {
	64	+ display: inline-block;
	65	+ border-radius: 8px;
	66	+ padding: 9px 14px;
	67	+ font-weight: 700;
	68	+ text-decoration: none;
	69	+ line-height: 1.2;
149	149	}
150	150
151		-/* ========== Buttons ========== */
152		-
153		-/*.btn-primary {
154		- background: @brand;
155		- border-color: @brand;
	72	+.btn-main {
156	156	color: #fff;
	74	+ background: @brand;
157	157
158	158	&:hover,
159	159	&:focus {
160		- background: @brand-strong;
161		- border-color: @brand-strong;
162	162	color: #fff;
	79	+ background: @brand-strong;
	80	+ text-decoration: none;
163	163	}
164	164	}
165		-*/
	83	+
166	166	.btn-secondary {
167		- color: @text;
168		- background: #fff;
169		- border: 1px solid fade(@text, 35%);
	85	+ color: @brand;
	86	+ background: fade(@brand, 8%);
	87	+ border: 1px solid fade(@brand, 20%);
170	170
171		-}
172		-
173		-/* ========== Hero ========== */
174		-
175		-.hero {
176		- overflow: hidden;
177		- background-repeat: no-repeat;
178		- background-attachment: scroll;
179		-
180		- &.hero-centered {
181		- text-align: center;
182		- display: flex;
183		- align-items: center;
184		- justify-content: center;
185		- min-height: 330px;
	89	+ &:hover,
	90	+ &:focus {
	91	+ color: @brand-strong;
	92	+ background: fade(@brand, 12%);
	93	+ text-decoration: none;
186	186	}
187		-
188		- .hero-inner {
189		- max-width: 860px;
190		- margin: 0 auto;
191		- display: flex;
192		- flex-direction: column;
193		- align-items: center;
194		- }
195		-
196		- h1 {
197		- max-width: 790px;
198		- margin-left: auto;
199		- margin-right: auto;
200		- line-height: 1.18;
201		- }
202		-
203		- .lead {
204		- max-width: 820px;
205		- font-size: 19px;
206		- line-height: 1.55;
207		- margin-top: 12px;
208		- }
209		-
210		- .benefits {
211		- display: flex;
212		- flex-wrap: wrap;
213		- justify-content: center;
214		- list-style: none;
215		- padding: 0;
216		- margin: 14px 0 0;
217		- color: @muted;
218		- font-size: 14px;
219		-
220		- li + li::before {
221		- content: "•";
222		- margin: 0 6px;
223		- }
224		- }
225	225	}
226	226
227		-.hero-kicker {
228		- display: inline-flex;
229		- align-items: center;
230		- gap: 8px;
231		- color: @brand;
232		- background: fade(@brand, 8%);
233		- border: 1px solid fade(@brand, 18%);
234		- border-radius: 999px;
235		- padding: 6px 12px;
236		- margin-bottom: 14px;
237		- font-size: 13px;
238		- font-weight: 700;
239		-}
240		-
241		-.hero-actions,
242		-#hero-cta {
	97	+.cta-row {
243	243	display: flex;
244		- gap: 12px;
	99	+ gap: 10px;
245	245	flex-wrap: wrap;
246	246	justify-content: center;
247		- margin-top: 22px;
	102	+ margin-top: 16px;
248	248	}
249	249
250		-/* ========== Contrast Band ========== */
	105	+/* ===== Landing page hero ===== */
251	251
252		-.contrast-band {
253		- position: relative;
254		- left: 50%;
255		- right: 50%;
256		- width: 100vw;
257		- margin-left: -50vw;
258		- margin-right: -50vw;
259		- overflow: hidden;
260		- padding: 54px 0;
	107	+.landing-hero {
	108	+ text-align: center;
	109	+ min-height: 340px;
	110	+ display: flex;
	111	+ align-items: center;
	112	+ justify-content: center;
261	261	background:
262		- radial-gradient(circle at 18% 18%, fade(@brand, 22%) 0%, transparent 28%),
263		- radial-gradient(circle at 86% 12%, fade(@brand, 16%) 0%, transparent 30%),
264		- linear-gradient(135deg, @text 0%, @text-soft 100%);
265		- color: #fff;
266		-
267		- &::before {
268		- content: "";
269		- position: absolute;
270		- inset: 0;
271		- background:
272		- linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
273		- linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
274		- background-size: 52px 52px;
275		- opacity: .38;
276		- pointer-events: none;
277		- }
278		-
279		- .container {
280		- position: relative;
281		- z-index: 1;
282		- }
283		-
284		- .contrast-panel {
285		- max-width: 1040px;
286		- margin: 0 auto;
287		- text-align: center;
288		- }
289		-
290		- h2 {
291		- max-width: 860px;
292		- margin: 0 auto 12px;
293		- color: #fff;
294		- }
295		-
296		- .section-intro {
297		- max-width: 840px;
298		- margin: 0 auto 26px;
299		- color: #D9E3EE;
300		- }
	114	+ radial-gradient(50rem 18rem at 50% -10%, #E7FFF8 0%, transparent 60%),
	115	+ radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
301	301	}
302	302
303		-.contrast-tags {
304		- max-width: 940px;
	118	+.landing-hero-inner {
	119	+ max-width: 860px;
305	305	margin: 0 auto;
306		- display: flex;
307		- flex-wrap: wrap;
308		- justify-content: center;
309		- gap: 10px;
	121	+}
310	310
311		- span {
312		- display: inline-flex;
313		- align-items: center;
314		- padding: 8px 13px;
315		- border: 1px solid fade(#fff, 18%);
316		- border-radius: 999px;
317		- background: fade(#fff, 8%);
318		- color: #F8FAFC;
319		- font-size: 13px;
320		- font-weight: 700;
321		- line-height: 1.2;
322		-
323		- &::before {
324		- content: "";
325		- width: 7px;
326		- height: 7px;
327		- margin-right: 8px;
328		- border-radius: 50%;
329		- background: @brand;
330		- box-shadow: 0 0 0 4px fade(@brand, 18%);
331		- }
332		- }
	123	+.landing-hero h1 {
	124	+ margin: 0 0 10px;
	125	+ font-size: 36px;
	126	+ line-height: 1.18;
333	333	}
334	334
335		-.contrast-support {
336		- max-width: 860px;
337		- margin: 30px auto 0;
338		- color: #D9E3EE;
339		- text-align: center;
340		- font-size: 15px;
341		- line-height: 1.7;
	129	+.landing-hero .lead {
	130	+ margin: 0 auto 12px;
	131	+ max-width: 760px;
	132	+ font-size: 18px;
342	342	}
343	343
344		-@media (max-width: 640px) {
345		- .contrast-band {
346		- padding: 40px 0;
347		- }
	135	+/* ===== Compact page header for section pages ===== */
348	348
349		- .contrast-tags span {
350		- font-size: 12px;
351		- padding: 8px 11px;
352		- }
	137	+.page-header-compact {
	138	+ padding: 34px 0 28px;
	139	+ text-align: center;
	140	+ border-top: none;
	141	+ background:
	142	+ radial-gradient(42rem 12rem at 50% -20%, #E7FFF8 0%, transparent 65%);
353	353	}
354	354
355		-/* ========== Reusable Grids ========== */
356		-
357		-.card-grid,
358		-.pathways,
359		-.services-grid,
360		-.resource-grid,
361		-.widgets {
362		- display: grid;
363		- grid-gap: 18px;
364		- margin-left: auto;
365		- margin-right: auto;
	145	+.page-header-compact .container {
	146	+ max-width: 850px;
366	366	}
367	367
368		-.card-grid,
369		-.pathways,
370		-.services-grid {
371		- grid-template-columns: repeat(3, minmax(0, 1fr));
372		- max-width: 1040px;
373		- margin-top: 22px;
	149	+.page-eyebrow {
	150	+ margin: 0 0 8px;
	151	+ color: @brand;
	152	+ font-size: 12px;
	153	+ font-weight: 800;
	154	+ text-transform: uppercase;
	155	+ letter-spacing: .08em;
374	374	}
375	375
376		-.resource-grid {
377		- grid-template-columns: repeat(2, minmax(0, 1fr));
378		- max-width: 1040px;
379		- margin-top: 22px;
	158	+.page-header-compact h1 {
	159	+ margin: 0 0 10px;
	160	+ font-size: 34px;
	161	+ line-height: 1.15;
380	380	}
381	381
382		-.widgets {
383		- grid-template-columns: repeat(4, minmax(0, 1fr));
384		- max-width: 1040px;
385		- margin-top: 20px;
	164	+/* ===== Benefits / chips ===== */
	165	+
	166	+.benefits,
	167	+.inline-benefits {
	168	+ display: flex;
	169	+ flex-wrap: wrap;
	170	+ justify-content: center;
	171	+ gap: 8px;
	172	+ list-style: none;
	173	+ padding: 0;
	174	+ margin: 12px 0 0;
386	386	}
387	387
388		-.card-grid > *,
389		-.pathways > *,
390		-.services-grid > *,
391		-.resource-grid > *,
392		-.widgets > * {
393		- min-width: 0;
	177	+.benefits li,
	178	+.inline-benefits li {
	179	+ color: @muted;
	180	+ font-size: 13px;
	181	+ background: fade(@brand, 8%);
	182	+ border: 1px solid fade(@brand, 18%);
	183	+ border-radius: 999px;
	184	+ padding: 4px 10px;
394	394	}
395	395
396		-/* ========== Shared Card Style ========== */
	187	+/* ===== Cards ===== */
397	397
398		-.widget,
399		-.pathway-card,
400		-.service-card,
401		-.resource-card {
402		- border: 1px solid @line;
403		- border-radius: @radius;
404		- box-shadow: @shadow-sm;
	189	+.widgets {
	190	+ margin-top: 16px;
	191	+ display: grid;
	192	+ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	193	+ grid-gap: 16px;
405	405	}
406	406
407		-/* ========== Small Widgets ========== */
408		-
409	409	.widget {
410	410	padding: 18px;
	198	+ background: #fff;
	199	+ border: 1px solid @line;
	200	+ border-radius: @radius;
	201	+ box-shadow: @shadow-sm;
	202	+ transition: transform .18s ease, box-shadow .18s ease;
411	411	display: flex;
412	412	flex-direction: column;
413	413	height: 100%;
414	414
	207	+ &:hover {
	208	+ transform: translateY(-2px);
	209	+ box-shadow: @shadow;
	210	+ }
	211	+
415	415	.icon {
416	416	display: flex;
417	417	align-items: center;
418	418	gap: 10px;
419		- padding-bottom: 8px;
420		- margin-bottom: 10px;
421		- border-bottom: 1px solid fade(@line, 70%);
	216	+ padding-bottom: 6px;
	217	+ margin-bottom: 8px;
	218	+ border-bottom: 1px solid fade(@line, 60%);
422	422
423	423	i {
424	424	color: @brand;
...	...	@@ -426,7 +426,7 @@
426	426
427	427	h4 {
428	428	margin: 0;
429		- line-height: 1.25;
	226	+ line-height: 1.2;
430	430	color: @text;
431	431	}
432	432	}
...	...	@@ -436,1595 +436,278 @@
436	436	color: @muted;
437	437	line-height: 1.45;
438	438	}
439		-}
440	440
441		-/* ========== Homepage Pathway Cards ========== */
442		-
443		-.pathway-card {
444		- padding: 24px;
445		- display: flex;
446		- flex-direction: column;
447		- min-height: 100%;
448		-
449		- .card-heading {
450		- display: flex;
451		- align-items: center;
452		- gap: 14px;
453		- margin-bottom: 14px;
454		- }
455		-
456		- .pathway-icon {
457		- width: 52px;
458		- height: 52px;
459		- border-radius: 50%;
460		- display: flex;
461		- align-items: center;
462		- justify-content: center;
463		- color: @brand;
464		- background: fade(@brand, 10%);
465		- font-size: 19px;
466		- flex-shrink: 0;
467		- }
468		-
469		- h3 {
470		- margin: 0;
471		- color: @text;
472		- font-size: 22px;
473		- line-height: 1.25;
474		- }
475		-
476		- p {
477		- color: @muted;
478		- line-height: 1.55;
479		- margin: 0 0 16px;
480		- }
481		-
482		- ul {
483		- margin: 0 0 22px;
484		- padding-left: 18px;
485		- color: @muted;
486		- font-size: 14px;
487		- line-height: 1.55;
488		- }
489		-
490		- li {
491		- margin: 6px 0;
492		- }
493		-
494	494	.card-link {
495		- margin-top: auto;
496		- padding-top: 4px;
	238	+ margin-top: 12px;
497	497
498	498	a {
499	499	color: @brand;
500	500	font-weight: 700;
501		- text-decoration: underline;
	243	+ text-decoration: none;
502	502
503		- &:hover,
504		- &:focus {
	245	+ &:hover {
505	505	color: @brand-strong;
	247	+ text-decoration: underline;
506	506	}
507	507	}
508	508	}
509	509	}
510	510
511		-.industry-trust-section {
512		- background:
513		- radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
	253	+/* ===== Service / listing rows ===== */
514	514
515		- .industry-trust-panel {
516		- max-width: 1040px;
517		- margin: 0 auto;
518		- padding: 30px 28px;
519		- border: 1px solid fade(@brand, 16%);
520		- border-radius: @radius;
521		- background:
522		- radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
523		- box-shadow: @shadow-sm;
524		- text-align: center;
525		- }
526		-
527		- h2 {
528		- margin-bottom: 12px;
529		- }
530		-
531		- .section-intro {
532		- margin-bottom: 20px;
533		- max-width: 820px;
534		- }
535		-
536		- .industry-tags {
537		- max-width: 880px;
538		- margin: 0 auto;
539		- display: flex;
540		- flex-wrap: wrap;
541		- justify-content: center;
542		- gap: 10px;
543		- }
544		-
545		- .industry-tags span {
546		- display: inline-flex;
547		- align-items: center;
548		- padding: 7px 12px;
549		- border: 1px solid fade(@brand, 20%);
550		- border-radius: 999px;
551		- background: #fff;
552		- color: @text;
553		- font-size: 13px;
554		- font-weight: 600;
555		- line-height: 1.2;
556		- box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
557		- }
558		-
559		- .industry-support {
560		- max-width: 820px;
561		- margin: 22px auto 0;
562		- color: @muted;
563		- font-size: 16px;
564		- line-height: 1.6;
565		- }
	255	+.services-grid {
	256	+ margin-top: 20px;
	257	+ display: flex;
	258	+ flex-wrap: wrap;
	259	+ gap: 24px;
	260	+ max-width: 960px;
	261	+ margin-left: auto;
	262	+ margin-right: auto;
	263	+ justify-content: center;
566	566	}
567	567
568		-@media (max-width: 640px) {
569		- .industry-trust-section {
570		- .industry-trust-panel {
571		- padding: 24px 18px;
572		- }
573		-
574		- .industry-tags {
575		- gap: 8px;
576		- }
577		-
578		- .industry-tags span {
579		- font-size: 12px;
580		- padding: 6px 10px;
581		- }
582		- }
	266	+.service {
	267	+ flex: 0 1 calc(50% - 12px);
	268	+ display: flex;
	269	+ align-items: flex-start;
	270	+ gap: 16px;
	271	+ margin-bottom: 8px;
583	583	}
584	584
585		-/* ========== Services ========== */
586		-
587		-.services {
588		- .services-grid {
589		- max-width: 1040px;
590		- }
591		-
592		- .service {
593		- display: flex;
594		- align-items: flex-start;
595		- gap: 16px;
596		- padding: 22px;
597		- border: 1px solid @line;
598		- border-radius: @radius;
599		- box-shadow: @shadow-sm;
600		-
601		- .service-icon {
602		- width: 46px;
603		- height: 46px;
604		- border-radius: 50%;
605		- display: flex;
606		- align-items: center;
607		- justify-content: center;
608		- font-size: 18px;
609		- color: @brand;
610		- background: fade(@brand, 10%);
611		- flex-shrink: 0;
612		- margin-top: 2px;
613		- }
614		-
615		- .service-body {
616		- h4 {
617		- margin: 0 0 6px;
618		- font-size: 18px;
619		- line-height: 1.25;
620		- font-weight: 800;
621		- color: @text;
622		- }
623		-
624		- p {
625		- margin: 0 0 8px;
626		- color: @muted;
627		- line-height: 1.5;
628		- }
629		-
630		- ul {
631		- margin: 9px 0 0;
632		- padding-left: 18px;
633		- color: @muted;
634		- font-size: 13px;
635		- line-height: 1.5;
636		- }
637		-
638		- li {
639		- margin: 4px 0;
640		- }
641		- }
642		- }
643		-}
644		-
645		-/* ========== Split / Process Section ========== */
646		-
647		-.split-section {
648		- background:
649		- radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
650		-}
651		-
652		-.split-grid {
653		- display: grid;
654		- grid-template-columns: 1.1fr .9fr;
655		- grid-gap: 36px;
656		- max-width: 1040px;
657		- margin: 0 auto;
	274	+.service-icon {
	275	+ width: 42px;
	276	+ height: 42px;
	277	+ border-radius: 50%;
	278	+ display: flex;
658	658	align-items: center;
	280	+ justify-content: center;
	281	+ color: @brand;
	282	+ background: fade(@brand, 10%);
	283	+ flex-shrink: 0;
	284	+ margin-top: 3px;
659	659	}
660	660
661		-.split-copy {
662		- h2 {
663		- text-align: left;
664		- margin-top: 0;
665		- }
666		-
667		- p {
668		- color: @muted;
669		- line-height: 1.6;
670		- }
671		-}
672		-
673		-.process-list {
674		- counter-reset: process;
675		- margin: 0;
676		- padding: 0;
677		- list-style: none;
678		-
679		- li {
680		- counter-increment: process;
681		- position: relative;
682		- padding: 16px 16px 16px 58px;
683		- margin-bottom: 12px;
684		- border: 1px solid @line;
685		- border-radius: @radius;
686		- box-shadow: @shadow-sm;
687		- color: @muted;
688		- line-height: 1.5;
689		-
690		- &:before {
691		- content: counter(process);
692		- position: absolute;
693		- left: 16px;
694		- top: 16px;
695		- width: 28px;
696		- height: 28px;
697		- border-radius: 50%;
698		- background: fade(@brand, 10%);
699		- color: @brand;
700		- display: flex;
701		- align-items: center;
702		- justify-content: center;
703		- font-weight: 800;
704		- }
705		-
706		- strong {
707		- display: block;
708		- color: @text;
709		- margin-bottom: 3px;
710		- }
711		- }
712		-}
713		-
714		-/* ========== Resources ========== */
715		-
716		-.resource-strip {
717		- background: @brand-bg;
718		-}
719		-
720		-.resource-card {
721		- padding: 20px;
722		-
	287	+.service-body {
723	723	h4 {
724		- margin: 0 0 8px;
725		- color: @text;
726		- font-size: 18px;
727		- line-height: 1.25;
728		- }
	289	+ margin: 0 0 4px;
	290	+ font-size: 1.125rem;
	291	+ font-weight: 800;
729	729
730		- p {
731		- color: @muted;
732		- margin: 0 0 12px;
733		- line-height: 1.5;
734		- }
735		-
736		- a {
737		- color: @brand;
738		- font-weight: 700;
739		- }
740		-}
741		-
742		-/* ========== Homepage Resource Strip ========== */
743		-
744		-.homepage-resource-strip {
745		- background:
746		- radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
747		-
748		- .resource-grid {
749		- max-width: 1040px;
750		- margin: 22px auto 0;
751		- display: grid;
752		- grid-template-columns: repeat(2, minmax(0, 1fr));
753		- grid-gap: 22px;
754		- align-items: stretch;
755		- }
756		-
757		- .resource-card {
758		- display: flex;
759		- flex-direction: column;
760		- min-width: 0;
761		- min-height: 100%;
762		- padding: 26px;
763		- }
764		-
765		- .resource-card h4 {
766		- margin: 0 0 10px;
767		- color: @text;
768		- font-size: 21px;
769		- line-height: 1.25;
770		- font-weight: 700;
771		- }
772		-
773		- .resource-card p {
774		- margin: 0 0 18px;
775		- color: @muted;
776		- font-size: 15px;
777		- line-height: 1.6;
778		- }
779		-
780		- .resource-card a {
781		- margin-top: auto;
782		- color: @brand;
783		- font-weight: 700;
784		- text-decoration: underline;
785		-
786		- &:hover,
787		- &:focus {
788		- color: @brand-strong;
789		- }
790		- }
791		-}
792		-
793		-@media (max-width: 980px) {
794		- .homepage-resource-strip {
795		- .resource-grid {
796		- grid-template-columns: 1fr;
797		- }
798		- }
799		-}
800		-
801		-@media (max-width: 640px) {
802		- .homepage-resource-strip {
803		- .resource-card {
804		- padding: 22px;
805		- }
806		-
807		- .resource-card h4 {
808		- font-size: 19px;
809		- }
810		- }
811		-}
812		-
813		-/* ========== CTA ========== */
814		-
815		-#mainContentArea .cta-section {
816		- padding: 44px 0 56px;
817		-
818		- .contact-inline {
819		- margin: 0;
820		- color: @muted;
821		-
822	822	a {
823		- color: @brand;
824		- }
825		- }
826		-}
	294	+ color: @text;
	295	+ text-decoration: none;
827	827
828		-#mainContentArea .cta-panel {
829		- position: relative;
830		- overflow: hidden;
831		- max-width: 1040px;
832		- margin: 0 auto;
833		- padding: 48px 40px;
834		- border: 0;
835		- border-radius: 26px;
836		- background:
837		- radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
838		- linear-gradient(135deg, @text 0%, @text-soft 100%);
839		- color: #fff;
840		- box-shadow: @shadow;
841		- text-align: center;
842		-}
843		-
844		-#mainContentArea .cta-panel::before {
845		- content: "";
846		- position: absolute;
847		- inset: 0;
848		- background:
849		- linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
850		- linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
851		- background-size: 48px 48px;
852		- opacity: .4;
853		- pointer-events: none;
854		-}
855		-
856		-#mainContentArea .cta-panel h2,
857		-#mainContentArea .cta-panel p,
858		-#mainContentArea .cta-panel .btn {
859		- position: relative;
860		- z-index: 1;
861		-}
862		-
863		-#mainContentArea .cta-panel h2 {
864		- max-width: 760px;
865		- margin: 0 auto 16px;
866		- color: #fff;
867		-}
868		-
869		-#mainContentArea .cta-panel p {
870		- max-width: 760px;
871		- margin: 0 auto 28px;
872		- color: #DBE4EF;
873		- font-size: 16px;
874		- line-height: 1.6;
875		-}
876		-
877		-#mainContentArea .cta-panel .btn-primary {
878		- border-color: #fff;
879		- background: #fff;
880		- color: @text;
881		- box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
882		-}
883		-
884		-#mainContentArea .cta-panel .btn-primary:hover,
885		-#mainContentArea .cta-panel .btn-primary:focus {
886		- border-color: #fff;
887		- background: #fff;
888		- color: @brand-strong;
889		- text-decoration: none;
890		-}
891		-
892		-.resource-inline-cta {
893		- display: flex;
894		- align-items: center;
895		- justify-content: space-between;
896		- gap: 22px;
897		- margin: 30px 0;
898		- padding: 20px 22px;
899		- border: 1px solid fade(@brand, 22%);
900		- border-radius: @radius;
901		- background: @brand-bg;
902		- box-shadow: @shadow-sm;
903		-
904		- p {
905		- margin: 0;
906		- color: @muted;
907		- line-height: 1.55;
908		- }
909		-
910		- strong {
911		- color: @text;
912		- }
913		-
914		- .btn {
915		- flex-shrink: 0;
916		- }
917		-}
918		-
919		-@media (max-width: 767px) {
920		- .resource-inline-cta {
921		- display: block;
922		- text-align: center;
923		-
924		- p {
925		- margin-bottom: 14px;
926		- }
927		-
928		- .btn {
929		- display: inline-block;
930		- margin-left: auto;
931		- margin-right: auto;
932		- }
933		- }
934		-}
935		-
936		-/* ========== Responsive ========== */
937		-
938		-@media (max-width: 980px) {
939		- .widgets,
940		- .pathways,
941		- .services-grid,
942		- .resource-grid {
943		- grid-template-columns: repeat(2, minmax(0, 1fr));
944		- }
945		-
946		- .split-grid {
947		- grid-template-columns: 1fr;
948		- }
949		-
950		- .split-copy h2 {
951		- text-align: center;
952		- }
953		-}
954		-
955		-@media (max-width: 760px) {
956		- section[id] {
957		- scroll-margin-top: 132px;
958		- }
959		-
960		- .header-inner {
961		- min-height: auto;
962		- padding-top: 14px;
963		- padding-bottom: 14px;
964		- flex-direction: column;
965		- align-items: center;
966		- gap: 12px;
967		- }
968		-
969		- .site-nav {
970		- width: 100%;
971		- justify-content: center;
972		- flex-wrap: wrap;
973		- gap: 10px 16px;
974		- font-size: 14px;
975		-
976		- .nav-cta {
977		- padding: 7px 12px;
978		- }
979		- }
980		-
981		- .hero.hero-centered {
982		- min-height: 280px;
983		- }
984		-
985		- .hero {
986		- .lead {
987		- font-size: 17px;
988		- }
989		-
990		- .benefits {
991		- gap: 4px 10px;
992		-
993		- li + li::before {
994		- content: none;
	297	+ &:hover {
	298	+ color: @brand;
	299	+ text-decoration: underline;
995	995	}
996	996	}
997	997	}
998		-}
999	999
1000		-@media (max-width: 640px) {
1001		- section {
1002		- padding: @section-padding-mobile;
1003		- }
1004		-
1005		- .widgets,
1006		- .pathways,
1007		- .services-grid,
1008		- .resource-grid {
1009		- grid-template-columns: 1fr;
1010		- }
1011		-
1012		- .pathway-card,
1013		- .services .service,
1014		- .resource-card,
1015		- .widget {
1016		- padding: 20px;
1017		- }
1018		-
1019		- .services .service {
1020		- gap: 14px;
1021		- }
1022		-
1023		- #mainContentArea .cta-panel {
1024		- padding: 30px 22px;
1025		- border-radius: 20px;
1026		- }
1027		-
1028		- #mainContentArea .cta-panel .btn-primary {
1029		- width: 100%;
1030		- }
1031		-}
1032		-
1033		-/* ========== Resource / Article Pages ========== */
1034		-
1035		-.resource-page {
1036		- padding-top: 0;
1037		-}
1038		-
1039		-.resource-header {
1040		- padding: @section-padding;
1041		- border-top: none;
1042		-
1043		- h1 {
1044		- margin: 0 auto 14px;
1045		- text-align: center;
1046		- line-height: 1.18;
1047		- }
1048		-
1049		- .resource-summary {
1050		- max-width: 780px;
1051		- margin: 0 auto;
1052		- color: @muted;
1053		- text-align: center;
1054		- font-size: 18px;
1055		- line-height: 1.55;
1056		- }
1057		-}
1058		-
1059		-.resource-layout {
1060		- display: block;
1061		- max-width: 1080px;
1062		- margin: 0 auto;
1063		- padding-top: 28px;
1064		-}
1065		-
1066		-.resource-layout::after {
1067		- content: "";
1068		- display: block;
1069		- clear: both;
1070		-}
1071		-
1072		-.resource-content {
1073		- color: @text;
1074		- font-size: 16px;
1075		- line-height: 1.68;
1076		-
1077		- h2 {
1078		- text-align: left;
1079		- margin: 34px 0 12px;
1080		- line-height: 1.28;
1081		- }
1082		-
1083		- h3 {
1084		- margin: 24px 0 8px;
1085		- line-height: 1.3;
1086		- }
1087		-
1088	1088	p {
1089		- margin: 0 0 16px;
1090		- }
1091		-
1092		- ul,
1093		- ol {
1094		- margin: 0 0 18px;
1095		- padding-left: 22px;
1096		- }
1097		-
1098		- li {
1099		- margin: 6px 0;
1100		- }
1101		-
1102		- strong {
	305	+ margin: 0 0 6px;
1103	1103	color: @text;
	307	+ line-height: 1.5;
1104	1104	}
1105		-}
1106	1106
1107		-.resource-note {
1108		- border-left: 4px solid @brand;
1109		- background: @brand-bg;
1110		- padding: 16px 18px;
1111		- margin: 22px 0;
1112		- border-radius: 0 @radius @radius 0;
1113		-
1114		- p:last-child {
1115		- margin-bottom: 0;
1116		- }
1117		-}
1118		-
1119		-.resource-note.related-resources {
1120		- p {
1121		- margin-bottom: 10px;
1122		- }
1123		-
1124	1124	ul {
1125		- margin: 0;
1126		- padding-left: 20px;
	311	+ margin: .45rem 0 0;
	312	+ padding-left: 1.1rem;
	313	+ color: @muted;
	314	+ font-size: 13px;
1127	1127	}
1128	1128
1129	1129	li {
1130		- margin: 6px 0;
1131		- color: @muted;
	318	+ margin: .25rem 0;
	319	+ line-height: 1.45;
1132	1132	}
1133		-}
1134	1134
1135		-.resource-faq-item {
1136		- display: flow-root;
1137		- border-bottom: 1px solid @line;
1138		- padding: 12px 0;
	322	+ .service-link {
	323	+ margin-top: .45rem;
	324	+ font-size: 13px;
1139	1139
1140		- summary {
1141		- cursor: pointer;
1142		- font-weight: 700;
1143		- color: @text;
1144		- line-height: 1.4;
1145		- }
1146		-
1147		- summary:hover,
1148		- summary:focus {
1149		- color: @brand-strong;
1150		- }
1151		-
1152		- p {
1153		- margin: 10px 0 4px;
1154		- color: @muted;
1155		- }
1156		-}
1157		-
1158		-.resource-checklist {
1159		- margin: 18px 0 24px;
1160		- padding: 0;
1161		- list-style: none;
1162		-
1163		- li {
1164		- position: relative;
1165		- padding: 10px 0 10px 34px;
1166		- border-bottom: 1px solid @line;
1167		-
1168		- &:before {
1169		- content: "\f00c";
1170		- font-family: FontAwesome;
1171		- position: absolute;
1172		- left: 0;
1173		- top: 11px;
	326	+ a {
1174	1174	color: @brand;
	328	+ font-weight: 700;
	329	+ text-decoration: none;
	330	+
	331	+ &:hover {
	332	+ color: @brand-strong;
	333	+ text-decoration: underline;
	334	+ }
1175	1175	}
1176	1176	}
1177	1177	}
1178	1178
1179		-.resource-sidebar {
1180		- float: right;
1181		- width: 280px;
1182		- margin-left: 42px;
1183		- margin-bottom: 28px;
1184		- position: sticky;
1185		- top: 96px;
1186		- border: 1px solid @line;
1187		- border-radius: @radius;
1188		- padding: 18px;
1189		- box-shadow: @shadow-sm;
	339	+/* ===== Split section ===== */
1190	1190
1191		- h4 {
1192		- margin: 0 0 10px;
1193		- }
1194		-
1195		- ul {
1196		- margin: 0;
1197		- padding-left: 18px;
1198		- color: @muted;
1199		- }
1200		-
1201		- li {
1202		- margin: 8px 0;
1203		- }
1204		-
1205		- a {
1206		- color: @brand;
1207		- font-weight: 600;
1208		- }
1209		-}
1210		-
1211		-.resource-cta {
1212		- display: flex;
1213		- flex-direction: column;
1214		- align-items: center;
1215		- text-align: center;
1216		-
1217		- max-width: 820px;
1218		- margin: 42px auto 0;
1219		- padding: 28px 30px;
1220		- border: 1px solid fade(@brand, 20%);
1221		- border-radius: @radius;
1222		- background: @brand-bg;
1223		-
1224		- h3 {
1225		- margin-top: 0;
1226		- margin-bottom: 10px;
1227		- }
1228		-
1229		- p {
1230		- max-width: 680px;
1231		- margin-left: auto;
1232		- margin-right: auto;
1233		- color: @muted;
1234		- }
1235		-
1236		- .btn {
1237		- margin-top: 8px;
1238		- }
1239		-}
1240		-
1241		-.resource-note,
1242		-.resource-checklist,
1243		-.resource-cta {
1244		- display: flow-root;
1245		-}
1246		-
1247		-@media (max-width: 767px) {
1248		- .resource-cta {
1249		- padding: 24px 20px;
1250		- }
1251		-}
1252		-
1253		-@media (max-width: 900px) {
1254		- .resource-layout {
1255		- padding-top: 22px;
1256		- }
1257		-
1258		- .resource-sidebar {
1259		- float: none;
1260		- width: 100%;
1261		- margin-left: 0;
1262		- margin-bottom: 24px;
1263		- position: static;
1264		- }
1265		-}
1266		-
1267		-/* ========== Products / Extensions Pages ========== */
1268		-
1269		-.product-index-section {
1270		- padding: @section-padding;
1271		-
1272		- h2 {
1273		- margin-bottom: 10px;
1274		- }
1275		-}
1276		-
1277		-.product-card-grid {
1278		- max-width: 980px;
1279		- margin: 26px auto 0;
	341	+.split-section {
1280	1280	display: grid;
1281		- grid-template-columns: 1fr;
1282		- grid-gap: 22px;
	343	+ grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
	344	+ gap: 32px;
	345	+ align-items: start;
	346	+ max-width: 960px;
	347	+ margin: 0 auto;
1283	1283	}
1284	1284
1285		-.product-card {
1286		- position: relative;
	350	+.panel {
	351	+ background: #fff;
1287	1287	border: 1px solid @line;
1288	1288	border-radius: @radius;
1289	1289	box-shadow: @shadow-sm;
1290		- padding: 32px;
1291		- display: grid;
1292		- grid-template-columns: 70px 1fr;
1293		- grid-gap: 24px;
1294		- align-items: start;
1295		- overflow: hidden;
1296		-
1297		- &:before {
1298		- content: "";
1299		- position: absolute;
1300		- inset: 0 auto 0 0;
1301		- width: 5px;
1302		- background: linear-gradient(180deg, @brand 0%, @brand-strong 100%);
1303		- }
1304		-
1305		- .product-card-icon {
1306		- width: 58px;
1307		- height: 58px;
1308		- border-radius: 50%;
1309		- background: fade(@brand, 10%);
1310		- border: 1px solid fade(@brand, 22%);
1311		- color: @brand;
1312		- display: flex;
1313		- align-items: center;
1314		- justify-content: center;
1315		- font-size: 22px;
1316		- flex-shrink: 0;
1317		- }
1318		-
1319		- .product-card-body {
1320		- min-width: 0;
1321		- }
1322		-
1323		- h3 {
1324		- margin: 0 0 10px;
1325		- color: @text;
1326		- font-size: 25px;
1327		- line-height: 1.22;
1328		- font-weight: 800;
1329		- }
1330		-
1331		- p {
1332		- color: @muted;
1333		- line-height: 1.6;
1334		- }
1335		-
1336		- .product-card-description {
1337		- max-width: 760px;
1338		- margin: 0 0 14px;
1339		- font-size: 16px;
1340		- }
	355	+ padding: 20px;
1341	1341	}
1342	1342
1343		-.product-card-kicker {
1344		- display: inline-flex;
1345		- align-items: center;
1346		- gap: 7px;
1347		- width: fit-content;
1348		- margin-bottom: 10px;
1349		- padding: 5px 10px;
1350		- border: 1px solid fade(@brand, 24%);
1351		- border-radius: 999px;
1352		- background: fade(@brand, 8%);
1353		- color: @brand-strong;
1354		- font-size: 12px;
1355		- font-weight: 800;
1356		- text-transform: uppercase;
1357		- letter-spacing: .04em;
1358		-
1359		- i {
1360		- color: @brand;
1361		- }
	358	+.panel h3 {
	359	+ margin-top: 0;
1362	1362	}
1363	1363
1364		-.product-highlights {
1365		- margin: 14px 0 22px;
1366		- padding-left: 18px;
1367		- color: @muted;
	362	+/* ===== Contact / form page ===== */
1368	1368
1369		- li {
1370		- margin: 6px 0;
1371		- line-height: 1.45;
1372		- }
1373		-}
1374		-
1375		-.product-card-actions {
1376		- display: flex;
1377		- align-items: center;
1378		- gap: 16px;
1379		- flex-wrap: wrap;
1380		-
1381		- .btn {
1382		- font-weight: 700;
1383		- }
1384		-}
1385		-
1386		-.product-card-contact {
1387		- color: @brand;
1388		- font-weight: 700;
1389		- text-decoration: underline;
1390		-
1391		- &:hover,
1392		- &:focus {
1393		- color: @brand-strong;
1394		- }
1395		-}
1396		-
1397		-@media (max-width: 640px) {
1398		- .product-card {
1399		- grid-template-columns: 1fr;
1400		- padding: 26px 22px;
1401		- text-align: left;
1402		-
1403		- &:before {
1404		- width: 4px;
1405		- }
1406		-
1407		- .product-card-icon {
1408		- margin-bottom: 2px;
1409		- }
1410		-
1411		- h3 {
1412		- font-size: 22px;
1413		- }
1414		- }
1415		-
1416		- .product-card-actions {
1417		- gap: 12px;
1418		- }
1419		-}
1420		-
1421		-/* ========== Individual Product Pages ========== */
1422		-
1423		-.product-layout {
	364	+.contact-layout {
1424	1424	display: grid;
1425		- grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
1426		- grid-gap: 32px;
1427		- max-width: 1040px;
	366	+ grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
	367	+ gap: 32px;
	368	+ max-width: 1000px;
1428	1428	margin: 0 auto;
1429	1429	align-items: start;
1430	1430	}
1431	1431
1432		-.product-summary-card,
1433		-.product-info-card,
1434		-.product-feature,
1435		-.product-gallery-panel {
	373	+.contact-card {
	374	+ background: #fff;
1436	1436	border: 1px solid @line;
1437	1437	border-radius: @radius;
1438	1438	box-shadow: @shadow-sm;
	378	+ padding: 20px;
1439	1439	}
1440	1440
1441		-.product-summary-card {
1442		- padding: 28px;
1443		-
1444		- h2 {
1445		- text-align: left;
1446		- margin-top: 0;
1447		- margin-bottom: 14px;
1448		- line-height: 1.25;
1449		- }
1450		-
1451		- p {
1452		- color: @muted;
1453		- line-height: 1.62;
1454		- }
1455		-
1456		- p:last-child {
1457		- margin-bottom: 0;
1458		- }
	381	+.contact-card h3 {
	382	+ margin-top: 0;
1459	1459	}
1460	1460
1461		-.product-info-card {
1462		- padding: 24px;
	385	+.contact-list {
	386	+ list-style: none;
	387	+ padding: 0;
	388	+ margin: 12px 0 0;
1463	1463
1464		- h3 {
1465		- margin-top: 0;
1466		- margin-bottom: 12px;
1467		- line-height: 1.3;
1468		- }
1469		-
1470		- p {
1471		- color: @muted;
1472		- line-height: 1.55;
1473		- }
1474		-
1475		- ul {
1476		- margin: 0;
1477		- padding-left: 20px;
1478		- color: @muted;
1479		- }
1480		-
1481	1481	li {
1482	1482	margin: 8px 0;
1483		- line-height: 1.3;
	392	+ color: @muted;
1484	1484	}
1485		-}
1486	1486
1487		-.product-card-note {
1488		- margin: 0 0 14px;
1489		- color: @muted;
1490		- line-height: 1.55;
1491		-}
1492		-
1493		-.product-feature-grid {
1494		- display: grid;
1495		- grid-template-columns: repeat(3, minmax(0, 1fr));
1496		- grid-gap: 20px;
1497		- max-width: 1040px;
1498		- margin: 24px auto 0;
1499		-}
1500		-
1501		-.product-feature {
1502		- padding: 24px;
1503		- min-width: 0;
1504		- min-height: 100%;
1505		-
1506		- .card-heading,
1507		- .feature-heading {
1508		- display: flex;
1509		- align-items: center;
1510		- gap: 14px;
1511		- margin-bottom: 14px;
	395	+ i {
	396	+ color: @brand;
	397	+ margin-right: 8px;
1512	1512	}
1513	1513
1514		- .feature-icon {
1515		- width: 46px;
1516		- height: 46px;
1517		- border-radius: 50%;
1518		- background: fade(@brand, 10%);
	400	+ a {
1519	1519	color: @brand;
1520		- display: flex;
1521		- align-items: center;
1522		- justify-content: center;
1523		- font-size: 18px;
1524		- flex-shrink: 0;
1525	1525	}
1526		-
1527		- h3 {
1528		- margin: 0;
1529		- color: @text;
1530		- font-size: 18px;
1531		- line-height: 1.25;
1532		- }
1533		-
1534		- p {
1535		- margin: 0;
1536		- color: @muted;
1537		- line-height: 1.52;
1538		- }
1539	1539	}
1540	1540
1541		-.product-gallery-caption {
1542		- max-width: 820px;
1543		- margin: 12px auto 0;
1544		- color: @muted;
1545		- font-size: 14px;
1546		- line-height: 1.5;
1547		- text-align: center;
	405	+.form-panel {
	406	+ background: #fff;
	407	+ border: 1px solid @line;
	408	+ border-radius: @radius;
	409	+ box-shadow: @shadow-sm;
	410	+ padding: 22px;
1548	1548	}
1549	1549
1550		-/* Keep the default XWiki gallery style.
1551		- Only add spacing before it and center it. */
1552		-.gallery.xGallery {
1553		- margin: 25px auto;
1554		- width: 920px;
1555		- height: 518px;
	413	+.form-panel .xform dl {
	414	+ margin: 0;
1556	1556	}
1557	1557
1558		-.product-section-muted {
1559		- background:
1560		- radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
	417	+.form-panel .xform dt {
	418	+ margin-top: 12px;
1561	1561	}
1562	1562
1563		-/* Compact process list when used inside a product card. */
1564		-.product-summary-card .process-list {
1565		- margin-top: 16px;
1566		-
1567		- li {
1568		- padding: 13px 14px 13px 50px;
1569		- margin-bottom: 10px;
1570		- box-shadow: none;
1571		- }
1572		-
1573		- li:before {
1574		- left: 14px;
1575		- top: 14px;
1576		- width: 24px;
1577		- height: 24px;
1578		- font-size: 12px;
1579		- }
1580		-
1581		- strong {
1582		- margin-bottom: 2px;
1583		- }
	421	+.form-panel .xform dt:first-child {
	422	+ margin-top: 0;
1584	1584	}
1585	1585
1586		-/* Kept for older product pages that still use a screenshot placeholder/panel. */
1587		-.product-gallery-panel {
1588		- max-width: 1040px;
1589		- margin: 20px auto 0;
1590		- padding: 26px;
1591		-
1592		- h2 {
1593		- margin-top: 0;
1594		- text-align: center;
1595		- }
1596		-
1597		- .gallery-note {
1598		- max-width: 700px;
1599		- margin: 0 auto 18px;
1600		- color: @muted;
1601		- text-align: center;
1602		- line-height: 1.55;
1603		- }
	425	+.form-panel .xform label {
	426	+ color: @text;
	427	+ font-weight: 700;
1604	1604	}
1605	1605
1606		-.product-gallery-placeholder {
1607		- min-height: 260px;
1608		- padding: 28px;
1609		- border: 1px dashed fade(@brand, 40%);
1610		- border-radius: @radius;
1611		- background: fade(@brand, 5%);
	430	+.form-panel .xform .xHint {
	431	+ display: block;
1612	1612	color: @muted;
1613		- text-align: center;
1614		- display: flex;
1615		- align-items: center;
1616		- justify-content: center;
	433	+ font-size: 12px;
	434	+ margin-top: 2px;
1617	1617	}
1618	1618
1619		-@media (max-width: 980px) {
1620		- .product-layout,
1621		- .product-feature-grid {
1622		- grid-template-columns: 1fr;
1623		- }
1624		-
1625		- .product-summary-card h2 {
1626		- text-align: center;
1627		- }
	437	+.form-panel .xform dd {
	438	+ margin-left: 0;
	439	+ margin-bottom: 10px;
1628	1628	}
1629	1629
1630		-@media (max-width: 640px) {
1631		- .product-card {
1632		- grid-template-columns: 1fr;
1633		- padding: 22px;
1634		- text-align: left;
1635		-
1636		- .product-card-icon {
1637		- margin-bottom: 2px;
1638		- }
1639		- }
1640		-
1641		- .product-summary-card,
1642		- .product-info-card,
1643		- .product-feature,
1644		- .product-gallery-panel {
1645		- padding: 20px;
1646		- }
1647		-
1648		- .product-feature {
1649		- .card-heading,
1650		- .feature-heading {
1651		- gap: 12px;
1652		- }
1653		-
1654		- .feature-icon {
1655		- width: 42px;
1656		- height: 42px;
1657		- font-size: 16px;
1658		- }
1659		- }
1660		-
1661		- .gallery.xGallery {
1662		- margin-top: 22px !important;
1663		- }
1664		-
1665		- .product-gallery-caption {
1666		- margin-top: 10px;
1667		- padding: 0 14px;
1668		- }
1669		-
1670		- .product-summary-card .process-list li {
1671		- padding-left: 46px;
1672		- }
	442	+.form-panel input[type="text"],
	443	+.form-panel input[type="email"],
	444	+.form-panel textarea,
	445	+.form-panel select {
	446	+ width: 100%;
	447	+ max-width: 100%;
	448	+ border: 1px solid @line;
	449	+ border-radius: 8px;
	450	+ padding: 8px 10px;
1673	1673	}
1674	1674
1675		-/* ========== Resources Index ========== */
	453	+/* ===== CTA ===== */
1676	1676
1677		-.resources-index-page {
1678		-
1679		- .services-grid {
1680		- grid-template-columns: repeat(2, minmax(0, 1fr));
1681		- }
	455	+.cta-section {
	456	+ padding: 24px 0 16px;
1682	1682	}
1683	1683
1684		-@media (max-width: 980px) {
1685		- .resources-index-page {
1686		- .services-grid {
1687		- grid-template-columns: 1fr;
1688		- }
1689		- }
1690		-}
	459	+.contact-inline {
	460	+ margin: 0;
	461	+ color: @muted;
1691	1691
1692		-@media (max-width: 767px) {
1693		- .resources-index-page {
1694		- padding: @section-padding-mobile;
1695		- }
1696		-}
1697		-
1698		-.resource-faq-item {
1699		- border-bottom: 1px solid @line;
1700		- padding: 12px 0;
1701		-
1702		- summary {
1703		- cursor: pointer;
	463	+ a {
	464	+ color: @brand;
1704	1704	font-weight: 700;
1705		- color: @text;
1706	1706	}
1707		-
1708		- p {
1709		- margin: 10px 0 4px;
1710		- color: @muted;
1711		- }
1712	1712	}
1713	1713
1714		-/* ========== Global Theme Background ========== */
	469	+/* ===== Compact sections ===== */
1715	1715
1716		-html,
1717		-body {
1718		- min-height: 100%;
	471	+.compact-section {
	472	+ padding: 28px 0;
1719	1719	}
1720	1720
1721		-body {
1722		- color: @text;
1723		- background:
1724		- radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%),
1725		- radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%),
1726		- linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1727		- background-attachment: fixed;
1728		-}
1729		-
1730		-/* Let the body background show through the XWiki wrappers.
1731		-#mainContentArea,
1732		-.resource-page,
1733		-.resources-index-page {
1734		- background: transparent !important;
1735		- background-image: none !important;
1736		-}
1737		-*/
1738		-/* Remove local decorative backgrounds that compete with the global gradient.
1739		-.hero,
1740		-.hero.hero-centered,
1741		-.trust-strip,
1742		-.industry-trust-section,
1743		-.split-section,
1744		-.resource-strip,
1745		-.homepage-resource-strip,
1746		-.resource-header,
1747		-.product-section-muted,
1748		-.resources-index-page {
1749		- background: transparent !important;
1750		- background-image: none !important;
1751		-}
1752		- */
1753		-/* Keep large panels readable, but remove their inner gradients.
1754		-.industry-trust-section .industry-trust-panel,
1755		-.cta-panel,
1756		-.resource-inline-cta,
1757		-.resource-note,
1758		-.resource-cta {
1759		- background: #fff !important;
1760		- background-image: none !important;
1761		-} */
1762		-
1763		-/* ========== Main Page Hero / SaaS Layout ========== */
1764		-
1765		-#mainContentArea .hero.hero-saas {
1766		- min-height: auto;
1767		- padding: 60px 0 34px;
1768		- display: flex;
1769		- align-items: center;
1770		- overflow: hidden;
1771		- background: transparent;
1772		-}
1773		-
1774		-#mainContentArea .hero-layout {
1775		- max-width: 1120px;
1776		- margin: 0 auto;
1777		- display: grid;
1778		- grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1779		- gap: 56px;
1780		- align-items: center;
1781		-}
1782		-
1783		-#mainContentArea .hero-copy {
1784		- min-width: 0;
1785		- text-align: left;
1786		-}
1787		-
1788		-#mainContentArea .hero.hero-saas h1 {
1789		- max-width: 640px;
1790		- margin: 0 0 26px;
1791		- font-size: 60px;
1792		- font-weight: 800;
1793		- line-height: 1;
1794		- letter-spacing: -3px;
1795		-}
1796		-
1797		-#mainContentArea .hero.hero-saas h1 span {
1798		- color: @brand;
1799		-}
1800		-
1801		-#mainContentArea .hero.hero-saas .lead {
1802		- max-width: 590px;
1803		- margin: 0 0 28px;
1804		- color: #334155;
1805		- text-align: left;
1806		- font-size: 18px;
1807		- line-height: 1.6;
1808		-}
1809		-
1810		-#mainContentArea .hero.hero-saas .benefits {
1811		- max-width: 620px;
1812		- margin: 0 0 30px;
1813		- padding: 0;
1814		- display: grid;
1815		- grid-template-columns: repeat(2, minmax(0, 1fr));
1816		- gap: 10px 24px;
1817		- list-style: none;
1818		- color: #475569;
1819		- font-size: 15px;
1820		- text-align: left;
1821		-}
1822		-
1823		-#mainContentArea .hero.hero-saas .benefits li {
1824		- display: grid;
1825		- grid-template-columns: 18px minmax(0, 1fr);
1826		- column-gap: 8px;
1827		- align-items: start;
1828		- margin: 0;
1829		- line-height: 1.45;
1830		-}
1831		-
1832		-#mainContentArea .hero.hero-saas .benefits li::before {
1833		- content: "✓";
1834		- display: block;
1835		- width: 18px;
1836		- color: @brand;
1837		- font-weight: 900;
1838		- line-height: 1.45;
1839		- text-align: left;
1840		- margin: 0;
1841		-}
1842		-
1843		-#mainContentArea .hero.hero-saas .hero-actions,
1844		-#mainContentArea .hero.hero-saas #hero-cta {
1845		- display: flex;
1846		- flex-wrap: wrap;
1847		- justify-content: flex-start;
1848		- gap: 12px;
	475	+.compact-section h2 {
1849	1849	margin-top: 0;
	477	+ margin-bottom: 14px;
1850	1850	}
1851	1851
1852		-#mainContentArea .hero-image-wrapper {
1853		- min-width: 0;
1854		- display: flex;
1855		- justify-content: center;
1856		- align-items: center;
1857		-}
	480	+/* ===== Responsive ===== */
1858	1858
1859		-#mainContentArea .hero-image {
1860		- display: block;
1861		- width: 100%;
1862		- max-width: 620px;
1863		- height: auto;
1864		- border: 0;
1865		-}
1866		-
1867		-/* ========== Main Page Hero Responsive ========== */
1868		-
1869		-@media (max-width: 1100px) {
1870		- #mainContentArea .hero-layout {
1871		- max-width: 760px;
1872		- grid-template-columns: 1fr;
1873		- gap: 34px;
	482	+@media (max-width: 767px) {
	483	+ section {
	484	+ padding: 26px 0;
1874	1874	}
1875	1875
1876		- #mainContentArea .hero-copy {
1877		- order: 1;
1878		- text-align: center;
	487	+ .landing-hero {
	488	+ min-height: 280px;
1879	1879	}
1880	1880
1881		- #mainContentArea .hero-image-wrapper {
1882		- order: 2;
	491	+ .landing-hero h1,
	492	+ .page-header-compact h1 {
	493	+ font-size: 28px;
1883	1883	}
1884	1884
1885		- #mainContentArea .hero.hero-saas h1 {
1886		- margin-left: auto;
1887		- margin-right: auto;
1888		- text-align: center;
	496	+ .page-lead,
	497	+ .landing-hero .lead {
	498	+ font-size: 16px;
1889	1889	}
1890	1890
1891		- #mainContentArea .hero.hero-saas .lead {
1892		- margin-left: auto;
1893		- margin-right: auto;
1894		- text-align: center;
	501	+ .service {
	502	+ flex: 0 1 100%;
1895	1895	}
1896	1896
1897		- #mainContentArea .hero.hero-saas .benefits {
1898		- margin-left: auto;
1899		- margin-right: auto;
1900		- }
1901		-
1902		- #mainContentArea .hero.hero-saas .hero-actions,
1903		- #mainContentArea .hero.hero-saas #hero-cta {
1904		- justify-content: center;
1905		- }
1906		-
1907		- #mainContentArea .hero-image {
1908		- max-width: 620px;
1909		- }
1910		-}
1911		-
1912		-@media (max-width: 640px) {
1913		- #mainContentArea .hero.hero-saas {
1914		- padding: 42px 0 28px;
1915		- }
1916		-
1917		- #mainContentArea .hero-layout {
1918		- gap: 28px;
1919		- }
1920		-
1921		- #mainContentArea .hero.hero-saas h1 {
1922		- font-size: 42px;
1923		- letter-spacing: -1.5px;
1924		- }
1925		-
1926		- #mainContentArea .hero.hero-saas .lead {
1927		- font-size: 17px;
1928		- }
1929		-
1930		- #mainContentArea .hero.hero-saas .benefits {
	505	+ .split-section,
	506	+ .contact-layout {
1931	1931	grid-template-columns: 1fr;
	508	+ gap: 20px;
1932	1932	}
1933		-
1934		- #mainContentArea .hero-image {
1935		- max-width: 100%;
1936		- }
1937	1937	}
1938		-
1939		-/* ========== Accessibility / Contrast Improvements ========== */
1940		-
1941		-/* Make the global background softer and less distracting. */
1942		-body {
1943		- background:
1944		- radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1945		- radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1946		- linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1947		- background-attachment: scroll;
1948		-}
1949		-
1950		-/* Keep the article area readable while preserving the page background around it. */
1951		-#mainContentArea .resource-layout {
1952		- padding: 28px;
1953		- border: 1px solid fade(@line, 85%);
1954		- border-radius: @radius;
1955		- background: rgba(255, 255, 255, .88);
1956		- box-shadow: @shadow-sm;
1957		-}
1958		-
1959		-/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1960		-#mainContentArea .widget,
1961		-#mainContentArea .pathway-card,
1962		-#mainContentArea .service-card,
1963		-#mainContentArea .resource-card,
1964		-#mainContentArea .services .service,
1965		-#mainContentArea .product-card,
1966		-#mainContentArea .product-feature,
1967		-#mainContentArea .product-summary-card,
1968		-#mainContentArea .product-info-card {
1969		- background: #fff;
1970		-}
1971		-
1972		-/* Make notes more readable and visually stronger. */
1973		-#mainContentArea .resource-note {
1974		- border: 1px solid fade(@brand, 18%);
1975		- border-left: 4px solid @brand;
1976		- background: #fff;
1977		- box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1978		-}
1979		-
1980		-/* Keep the sidebar clearly separated from the background. */
1981		-#mainContentArea .resource-sidebar {
1982		- background: #fff;
1983		-}
1984		-
1985		-/* Make CTA panels stand out more clearly. */
1986		-#mainContentArea .resource-cta,
1987		-#mainContentArea .resource-inline-cta {
1988		- background: #fff;
1989		-}
1990		-
1991		-/* Improve table readability on long resource pages. */
1992		-#mainContentArea .resource-content table {
1993		- background: #fff;
1994		-}
1995		-
1996		-#mainContentArea .resource-content table th {
1997		- color: @text;
1998		- background: #F8FAFC;
1999		-}
2000		-
2001		-#mainContentArea .resource-content table td {
2002		- color: @text-soft;
2003		-}
2004		-
2005		-/* Slightly improve paragraph/list contrast in long articles. */
2006		-#mainContentArea .resource-content p,
2007		-#mainContentArea .resource-content li {
2008		- color: @text-soft;
2009		-}
2010		-
2011		-#mainContentArea .resource-content .resource-note p,
2012		-#mainContentArea .resource-content .resource-checklist li,
2013		-#mainContentArea .resource-content .process-list li {
2014		- color: @muted;
2015		-}
2016		-
2017		-@media (max-width: 900px) {
2018		- #mainContentArea .resource-layout {
2019		- padding: 22px;
2020		- }
2021		-}
2022		-
2023		-@media (max-width: 640px) {
2024		- #mainContentArea .resource-layout {
2025		- padding: 18px;
2026		- border-radius: 14px;
2027		- }
2028		-}
2029		-
2030		-

XWiki.StyleSheetExtension[1]

cache

...	...	@@ -1,1 +1,0 @@
1		-long

code

...	...	@@ -1,158 +1,0 @@
1		-/* ========== Agnease Public Top Menu ========== */
2		-/* Top-level menu items */
3		-
4		-#menuview .agnease-menu-item,
5		-#menuview .agnease-menu-link {
6		- > a,
7		- > .dropdown-toggle {
8		- color: @brand;
9		- font-size: 17px;
10		- font-weight: 600;
11		- padding-left: 16px;
12		- padding-right: 16px;
13		- text-decoration: none;
14		- background: transparent;
15		- }
16		-
17		- > a:hover,
18		- > a:focus,
19		- > a:active,
20		- &.open > a,
21		- &.active > a {
22		- color: @brand-strong;
23		- text-decoration: none;
24		- outline: none;
25		- background: transparent;
26		- }
27		-
28		- .caret {
29		- margin-left: 5px;
30		- border-top-color: @brand;
31		- border-bottom-color: @brand;
32		- }
33		-
34		- > a:hover .caret,
35		- > a:focus .caret,
36		- > a:active .caret,
37		- &.open > a .caret,
38		- &.active > a .caret {
39		- border-top-color: @brand-strong;
40		- border-bottom-color: @brand-strong;
41		- }
42		-}
43		-
44		-/* Dropdown panel */
45		-
46		-#menuview .agnease-dropdown {
47		- min-width: 310px;
48		- padding: 10px 8px;
49		- border: 1px solid fade(@brand, 18%);
50		- border-radius: 12px;
51		- background: #fff;
52		- box-shadow: 0 12px 32px fade(@brand-strong, 12%);
53		-
54		- > li > a {
55		- display: flex;
56		- align-items: center;
57		- gap: 12px;
58		- padding: 11px 14px;
59		- color: @brand;
60		- white-space: nowrap;
61		- font-size: 16px;
62		- font-weight: 600;
63		- line-height: 1.3;
64		- text-decoration: none;
65		- background: transparent;
66		-
67		- i {
68		- width: 20px;
69		- flex: 0 0 20px;
70		- color: @brand;
71		- text-align: center;
72		- font-size: 15px;
73		- }
74		-
75		- &:hover,
76		- &:focus,
77		- &:active {
78		- color: @brand-strong;
79		- text-decoration: none;
80		- outline: none;
81		- background: transparent;
82		-
83		- i {
84		- color: @brand-strong;
85		- }
86		- }
87		- }
88		-
89		- > .active > a {
90		- color: @brand-strong;
91		- background: transparent;
92		-
93		- i {
94		- color: @brand-strong;
95		- }
96		- }
97		-
98		- .divider {
99		- margin: 8px 0;
100		- background-color: fade(@brand, 16%);
101		- }
102		-}
103		-
104		-/* Mobile */
105		-
106		-@media (max-width: 767px) {
107		- #menuview {
108		- margin-left: 0;
109		- width: 100%;
110		- }
111		-
112		- #menuview .navbar-nav {
113		- float: none;
114		- margin: 0;
115		- width: 100%;
116		- text-align: center;
117		- }
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 {
134		- min-width: 0;
135		- width: 100%;
136		- padding: 4px 8px 8px 18px;
137		- border: 0;
138		- border-radius: 0;
139		- box-shadow: none;
140		- background: transparent;
141		- text-align: left;
142		-
143		- > li > a {
144		- padding: 8px 10px;
145		- white-space: normal;
146		- font-size: 15px;
147		-
148		- i {
149		- width: 18px;
150		- flex-basis: 18px;
151		- }
152		- }
153		-
154		- .divider {
155		- margin: 5px 0;
156		- }
157		- }
158		-}

contentType

...	...	@@ -1,1 +1,0 @@
1		-LESS

name

...	...	@@ -1,1 +1,0 @@
1		-Menu

use

...	...	@@ -1,1 +1,0 @@
1		-onDemand

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