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

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