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

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