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

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