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

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