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

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