Changes for page Home
Last modified by Alex Cotiugă on 2026/01/13 13:12
From version 7.90
edited by Alex Cotiugă
on 2025/11/13 21:26
on 2025/11/13 21:26
Change comment:
There is no comment for this version
To version 7.48
edited by Alex Cotiugă
on 2025/11/13 12:15
on 2025/11/13 12:15
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -3,221 +3,217 @@ 3 3 Agnease helps organizations maintain, upgrade, and extend their XWiki environments with clarity and precision. Focusing on stability, performance, and long-term support we ensure your business knowledge and collaboration tools remain dependable, secure, and adaptable to growth.*# 4 4 {{html clean="false"}} 5 5 <main class="agnease-landing"> 6 - <!-- ================= HERO ================= --> 7 - <section class="hero hero-centered" aria-labelledby="hero-title"> 8 - <div class="container"> 9 - <div class="row"> 10 - <div class="col-sm-12"> 11 - <div class="hero-inner"> 12 - <h1 id="hero-title">Professional XWiki solutions, from setup to long-term stability</h1> 13 - <p class="lead">Need your XWiki upgraded, secured, or improved? Let’s make it happen</p> 14 - <div class="hero-cta"> 15 - <a class="btn btn-primary" href="#contact" aria-label="Schedule a call with Agnease"> 16 - Request a consultation 17 - </a> 18 - </div> 19 - <ul class="benefits"> 20 - <li>Smooth upgrades</li> 21 - <li>Reliable support plans</li> 22 - <li>Custom integrations</li> 23 - <li>Secure, optimized platforms</li> 24 - </ul> 6 + <!-- ================= HERO ================= --> 7 + <section class="hero hero-centered" aria-labelledby="hero-title"> 8 + <div class="container"> 9 + <div class="hero-inner"> 10 + <h1 id="hero-title">Professional XWiki solutions, from setup to long-term stability</h1> 11 + <p class="lead">Need your XWiki upgraded, secured, or improved? Let’s make it happen</p> 12 + <div class="hero-cta"> 13 + <a class="btn btn-primary" href="#contact" aria-label="Schedule a call with Agnease">Request a consultation</a> 25 25 </div> 15 + <ul class="benefits"> 16 + <li>Smooth upgrades</li> 17 + <li>Reliable support plans</li> 18 + <li>Custom integrations</li> 19 + <li>Secure, optimized platforms</li> 20 + </ul> 26 26 </div> 27 27 </div> 28 - </div> 29 - </section> 30 - 31 - <!-- ========= WHY CHOOSE AGNEASE (widgets) ========= --> 32 - #set ($whySectionData = [{ 33 - 'title': 'Stability & security', 34 - 'icon': 'shield', 35 - 'content': 'Proven upgrade steps, rollback safety, and proactive hardening keep your wiki reliable.' 36 - },{ 37 - 'title': 'Predictable delivery', 38 - 'icon': 'check-square-o', 39 - 'content': 'Clear scope, defined steps, and documented results to avoid surprises.' 40 - },{ 41 - 'title': 'Clean integrations', 42 - 'icon': 'link', 43 - 'content': 'Maintainable SSO, API, and system connections tailored to your environment.' 44 - },{ 45 - 'title': 'Long-term support', 46 - 'icon': 'life-ring', 47 - 'content': 'Guaranteed response times, regular checks, and fast assistance when needed.' 48 - }]) 49 - <section aria-labelledby="why-title"> 50 - <div class="container"> 51 - <h2 id="why-title">Why choose Agnease</h2> 52 - <p class="lead">10+ years of XWiki expertise with structured delivery and lasting collaboration</p> 53 - <div class="row widgets" role="list"> 54 - #foreach ($entry in $whySectionData) 55 - <div class="widget col-sm-6 col-md-3" role="listitem"> 56 - <div class="icon" aria-hidden="true"> 57 - <i class="fa fa-$entry.icon"></i> 58 - <h4>$entry.title</h4> 59 - </div> 60 - <p>$entry.content</p> 61 - </div> 62 - #end 63 - </div> 64 - </div> 65 - </section> 66 - <!-- ================= SERVICES ================= --> 67 - #set ($servicesSectionData = [{ 68 - 'title': 'Upgrades', 69 - 'icon': 'refresh', 70 - 'content': 'Stay current with the latest XWiki LTS and keep your instance secure and stable.', 71 - 'items': [ 72 - 'Audit setup, extensions, and configurations', 73 - 'Test upgrades with backups and validation', 74 - 'Safe production rollout with minimal downtime' 75 - ] 76 - },{ 77 - 'title': 'Maintenance, Support & Recovery', 78 - 'icon': 'stethoscope', 79 - 'content': 'Ensure long-term stability and quick response when issues appear.', 80 - 'items': [ 81 - 'Monitoring and performance checks', 82 - 'Security patching, log analysis, triage', 83 - 'Issue recovery, data repair, hardening' 84 - ] 85 - },{ 86 - 'title': 'Development & Integrations', 87 - 'icon': 'cogs', 88 - 'content': 'Extend and connect XWiki to fit your workflow and systems.', 89 - 'items': [ 90 - 'Custom apps, macros, automation', 91 - 'SSO, REST APIs, LDAP, CRM links', 92 - 'Maintainable extensions for long-term use' 93 - ] 94 - },{ 95 - 'title': 'Hosting & Deployment', 96 - 'icon': 'cloud', 97 - 'content': 'Cloud-ready environments designed for reliability and performance.', 98 - 'items': [ 99 - 'Containerized deployment and TLS', 100 - 'Backups, restore strategy, observability', 101 - 'Optimization and load tuning' 102 - ] 103 - },{ 104 - 'title': 'Migrations to XWiki', 105 - 'icon': 'exchange', 106 - 'content': 'Move from Confluence, SharePoint, or MediaWiki to XWiki with full data integrity and structure.', 107 - 'items': [ 108 - 'Preserve hierarchy, attachments, and permissions', 109 - 'Convert macros, categories, and metadata for XWiki', 110 - 'Redirect old URLs and maintain SEO consistency' 111 - ] 112 - }]) 113 - <section class="services" aria-labelledby="services-title"> 114 - <div class="container"> 115 - <h2 id="services-title">Services</h2> 116 - <p class="services-sub"> 117 - All the XWiki services you need, delivered with precision and care 118 - </p> 119 - 120 - <div class="row services-grid" role="list"> 121 - #foreach ($entry in $servicesSectionData) 122 - <div class="service col-sm-6" role="listitem"> 123 - <div class="service-icon"> 124 - <i class="fa fa-$entry.icon" aria-hidden="true"></i> 125 - </div> 126 - <div class="service-body"> 127 - <h4>$entry.title</h4> 23 + </section> 24 + <!-- ========= WHY CHOOSE AGNEASE (widgets) ========= --> 25 + #set ($whyArray = [{ 26 + 'title': 'Stability & security', 27 + 'icon': 'shield', 28 + 'content': 'Proven upgrade steps, rollback safety, and proactive hardening keep your wiki reliable.' 29 + },{ 30 + 'title': 'Predictable delivery', 31 + 'icon': 'check-square-o', 32 + 'content': 'Clear scope, defined steps, and documented results to avoid surprises.' 33 + },{ 34 + 'title': 'Clean integrations', 35 + 'icon': 'link', 36 + 'content': 'Maintainable SSO, API, and system connections tailored to your environment.' 37 + },{ 38 + 'title': 'Long-term support', 39 + 'icon': 'life-ring', 40 + 'content': 'Guaranteed response times, regular checks, and fast assistance when needed.' 41 + }]) 42 + <section aria-labelledby="why-title"> 43 + <div class="container"> 44 + <h2 id="why-title">Why choose Agnease</h2> 45 + <p class="lead">10+ years of XWiki expertise with structured delivery and lasting collaboration</p> 46 + <div class="widgets" role="list"> 47 + #foreach ($entry in $whyArray) 48 + <article class="widget" role="listitem"> 49 + <div class="icon" aria-hidden="true"> 50 + <i class="fa fa-$entry.icon"></i> 51 + <h4>$entry.title</h4> 52 + </div> 128 128 <p>$entry.content</p> 129 - <ul> 130 - #foreach ($item in $entry.items) 131 - <li>$item</li> 132 - #end 133 - </ul> 134 - </div> 135 - </div> 136 - #end 54 + </article> 55 + #end 56 + </div> 137 137 </div> 138 - </div> 139 - </section> 58 + </section> 59 + <!-- ================= SERVICES ================= --> 60 + <section class="services" aria-labelledby="services-title"> 61 + <div class="container"> 62 + <h2 id="services-title">Services</h2> 63 + <p class="services-sub">All the XWiki services you need, delivered with precision and care</p> 140 140 141 - <!-- ================= METRICS ================= --> 142 - <section aria-labelledby="metrics-title"> 143 - <div class="container"> 144 - <h2 id="metrics-title">Delivery at a glance</h2> 145 - <div class="metrics" role="list"> 146 - <div class="metric" role="listitem"> 147 - <div class="num">8–12h</div> 148 - <div class="label">Typical LTS upgrade window</div> 65 + <div class="services-grid"> 66 + <!-- Row 1 --> 67 + <article class="service"> 68 + <i class="fa fa-refresh" aria-hidden="true"></i> 69 + <div class="body"> 70 + <h3>Upgrades</h3> 71 + <p>Stay current with the latest XWiki LTS and keep your instance secure and stable.</p> 72 + <ul> 73 + <li>Audit setup, extensions, and configurations</li> 74 + <li>Test upgrades with backups and validation</li> 75 + <li>Safe production rollout with minimal downtime</li> 76 + </ul> 149 149 </div> 150 - <div class="metric" role="listitem"> 151 - <div class="num"><1h</div> 152 - <div class="label">Average service downtime during upgrades</div> 78 + </article> 79 + 80 + <article class="service"> 81 + <i class="fa fa-stethoscope" aria-hidden="true"></i> 82 + <div class="body"> 83 + <h3>Maintenance, Support & Recovery</h3> 84 + <p>Ensure long-term stability and quick response when issues appear.</p> 85 + <ul> 86 + <li>Monitoring and performance checks</li> 87 + <li>Security patching, log analysis, triage</li> 88 + <li>Issue recovery, data repair, hardening</li> 89 + </ul> 153 153 </div> 154 - <div class="metric" role="listitem"> 155 - <div class="num">24–48h</div> 156 - <div class="label">First response SLA (plans)</div> 91 + </article> 92 + 93 + <!-- Row 2 --> 94 + <article class="service"> 95 + <i class="fa fa-cogs" aria-hidden="true"></i> 96 + <div class="body"> 97 + <h3>Development & Integrations</h3> 98 + <p>Extend and connect XWiki to fit your workflow and systems.</p> 99 + <ul> 100 + <li>Custom apps, macros, automation</li> 101 + <li>SSO, REST APIs, LDAP, CRM links</li> 102 + <li>Maintainable extensions for long-term use</li> 103 + </ul> 157 157 </div> 158 - <div class="metric" role="listitem"> 159 - <div class="num">10+ yrs</div> 160 - <div class="label">XWiki expertise</div> 105 + </article> 106 + 107 + <article class="service"> 108 + <i class="fa fa-cloud" aria-hidden="true"></i> 109 + <div class="body"> 110 + <h3>Hosting & Deployment</h3> 111 + <p>Cloud-ready environments designed for reliability and performance.</p> 112 + <ul> 113 + <li>Containerized deployment and TLS</li> 114 + <li>Backups, restore strategy, observability</li> 115 + <li>Optimization and load tuning</li> 116 + </ul> 161 161 </div> 162 - </div> 163 - <p class="lead" style="margin-top:.6rem">*for rehearsed, staged upgrades on supported environments.</p> 118 + </article> 119 + 120 + <!-- Row 3 (single, centered) --> 121 + <article class="service service--center"> 122 + <i class="fa fa-exchange" aria-hidden="true"></i> 123 + <div class="body"> 124 + <h3>Migrations</h3> 125 + <p>Move from Confluence, SharePoint, or MediaWiki to XWiki with full data integrity and structure.</p> 126 + <ul> 127 + <li>Preserve hierarchy, attachments, and permissions</li> 128 + <li>Convert macros, categories, and metadata for XWiki</li> 129 + <li>Redirect old URLs and maintain SEO consistency</li> 130 + </ul> 131 + </div> 132 + </article> 164 164 </div> 165 - </section> 134 + </div> 135 +</section> 166 166 167 - <!-- ================= PROCESS ================= --> 168 - <section aria-labelledby="process-title"> 169 - <div class="container"> 170 - <h2 id="process-title">Process</h2> 171 - <p class="lead">Calm, predictable, and transparent from start to finish.</p> 172 - <div class="steps"> 173 - <div class="step"> 174 - <h3>1) Assess</h3> 175 - <p>Review environment, extensions, constraints, and risks with no surprises.</p> 137 + <!-- ================= METRICS ================= --> 138 + <section aria-labelledby="metrics-title"> 139 + <div class="container"> 140 + <h2 id="metrics-title">Delivery at a glance</h2> 141 + <div class="metrics" role="list"> 142 + <div class="metric" role="listitem"> 143 + <div class="num">8–12h</div> 144 + <div class="label">Typical LTS upgrade window</div> 145 + </div> 146 + <div class="metric" role="listitem"> 147 + <div class="num"><1h</div> 148 + <div class="label">Average service downtime during upgrades</div> 149 + </div> 150 + <div class="metric" role="listitem"> 151 + <div class="num">24–48h</div> 152 + <div class="label">First response SLA (plans)</div> 153 + </div> 154 + <div class="metric" role="listitem"> 155 + <div class="num">10+ yrs</div> 156 + <div class="label">XWiki expertise</div> 157 + </div> 176 176 </div> 177 - <div class="step"> 178 - <h3>2) Plan</h3> 179 - <p>Agree scope, milestones, downtime windows, and rollback checkpoints.</p> 159 + <p class="lead" style="margin-top:.6rem">*for rehearsed, staged upgrades on supported environments.</p> 160 + </div> 161 + </section> 162 + 163 + <!-- ================= PROCESS ================= --> 164 + <section aria-labelledby="process-title"> 165 + <div class="container"> 166 + <h2 id="process-title">Process</h2> 167 + <p class="lead">Calm, predictable, and transparent from start to finish.</p> 168 + <div class="steps"> 169 + <div class="step"> 170 + <h3>1) Assess</h3> 171 + <p>Review environment, extensions, constraints, and risks with no surprises.</p> 172 + </div> 173 + <div class="step"> 174 + <h3>2) Plan</h3> 175 + <p>Agree scope, milestones, downtime windows, and rollback checkpoints.</p> 176 + </div> 177 + <div class="step"> 178 + <h3>3) Deliver</h3> 179 + <p>Execute, verify, document, and hand over with actionable notes.</p> 180 + </div> 180 180 </div> 181 - <div class="step"> 182 - <h3>3) Deliver</h3> 183 - <p>Execute, verify, document, and hand over with actionable notes.</p> 184 - </div> 185 185 </div> 186 - </div> 187 - </section> 183 + </section> 188 188 189 - <!-- ================= FAQ ================= --> 190 - <section class="faq" aria-labelledby="faq-title"> 191 - <div class="container"> 192 - <h2 id="faq-title">FAQ</h2> 193 - <details> 194 - <summary>How much downtime should we expect for an upgrade?</summary> 195 - <p>Most upgrades complete in a short maintenance window. For mission-critical wikis we rehearse and stage changes to minimize downtime.</p> 196 - </details> 197 - <details> 198 - <summary>Can you help if our wiki is already broken?</summary> 199 - <p>Yes. We start with an audit to stabilize the instance, recover missing features, and harden configuration.</p> 200 - </details> 201 - <details> 202 - <summary>Do you offer support plans?</summary> 203 - <p>Yes, from ad-hoc assistance to ongoing retainers with response-time guarantees and monthly health checks.</p> 204 - </details> 205 - </div> 206 - </section> 185 + <!-- ================= FAQ ================= --> 186 + <section class="faq" aria-labelledby="faq-title"> 187 + <div class="container"> 188 + <h2 id="faq-title">FAQ</h2> 189 + <details> 190 + <summary>How much downtime should we expect for an upgrade?</summary> 191 + <p>Most upgrades complete in a short maintenance window. For mission-critical wikis we rehearse and stage changes to minimize downtime.</p> 192 + </details> 193 + <details> 194 + <summary>Can you help if our wiki is already broken?</summary> 195 + <p>Yes. We start with an audit to stabilize the instance, recover missing features, and harden configuration.</p> 196 + </details> 197 + <details> 198 + <summary>Do you offer support plans?</summary> 199 + <p>Yes, from ad-hoc assistance to ongoing retainers with response-time guarantees and monthly health checks.</p> 200 + </details> 201 + </div> 202 + </section> 207 207 208 - <!-- ================= CTA ================= --> 209 - <section id="contact" aria-labelledby="contact-title"> 210 - <div class="container"> 211 - <div class="cta-band"> 212 - <div> 213 - <h3 id="contact-title">Need a reliable plan for your XWiki?</h3> 214 - <p class="lead" style="margin:0">Upgrades, support, and integrations handled with low risk and clear communication.</p> 204 + <!-- ================= CTA ================= --> 205 + <section id="contact" aria-labelledby="contact-title"> 206 + <div class="container"> 207 + <div class="cta-band"> 208 + <div> 209 + <h3 id="contact-title">Need a reliable plan for your XWiki?</h3> 210 + <p class="lead" style="margin:0">Upgrades, support, and integrations handled with low risk and clear communication.</p> 211 + </div> 212 + <a class="btn btn-primary" href="mailto:hello@agnease.com">Contact Agnease</a> 215 215 </div> 216 - <a class="btn btn-primary" href="mailto:hello@agnease.com">Contact Agnease</a> 217 217 </div> 218 - </div> 219 - </section> 220 -</main> 215 + </section> 216 + </main> 221 221 {{/html}} 222 222 #* 223 223 = XWiki Multi-Factor Authentication (MFA) Application =
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -22,7 +22,7 @@ 22 22 h2 { font-size: clamp(1.4rem, 1.4vw + .8rem, 2rem); line-height: 1.2; margin: .2rem 0 .4rem; } 23 23 h3 { font-size: 1.12rem; margin: .2rem 0 .25rem; }*/ 24 24 .lead { color: @muted; max-width: 72ch; } 25 - .container { max-width: @maxw; margin-top: 5px; padding: 0; overflow-x: clip;}25 + .container { max-width: @maxw; margin-top: 5px; padding: 0;} 26 26 27 27 /* Global sections */ 28 28 section { padding: 32px 0; border-top: 1px solid @line; } ... ... @@ -120,145 +120,124 @@ 120 120 } 121 121 } 122 122 123 - /* === WHY CHOOSE (widgets usingBootstrapgrid) === */123 + /* === WHY CHOOSE (widgets with inline icon + title) === */ 124 124 .widgets { 125 - margin-top: 12px; 125 + display: grid; 126 + gap: 16px; 127 + grid-template-columns: 1fr; 126 126 127 - /* Flex layout for equal-height and spacing */ 129 + @media (min-width: 860px) { 130 + grid-template-columns: repeat(4, 1fr); 131 + } 132 + } 133 + 134 + .widget { 135 + background: #fff; 136 + border: 1px solid @line; 137 + border-radius: @radius; 138 + padding: 18px; 139 + box-shadow: @shadow-sm; 128 128 display: flex; 129 - flex-wrap: wrap; 130 - justify-content: space-between; 141 + flex-direction: column; 142 + justify-content: flex-start; 143 + gap: 8px; 144 + text-align: left; 145 + transition: transform 0.18s ease, box-shadow 0.18s ease; 131 131 132 - .widget { 133 - box-sizing: border-box; 147 + &:hover { 148 + transform: translateY(-2px); 149 + box-shadow: @shadow; 150 + } 134 134 135 - /* Desktop (md+) – 4 per row */ 136 - flex: 0 0 24%; 137 - max-width: 24%; 138 - margin-bottom: 16px; 139 - 140 - /* Card look */ 152 + /* The icon + title row */ 153 + .icon { 141 141 display: flex; 142 - flex-direction: column; 143 - height: 100%; 144 - padding: 18px; 145 - background: #fff; 146 - border: 1px solid @line; 147 - border-radius: @radius; 148 - box-shadow: @shadow-sm; 149 - transition: transform .18s ease, box-shadow .18s ease; 155 + align-items: center; 156 + gap: 10px; 157 + padding: 6px 0; 158 + border-bottom: 1px solid fade(@line, 60%); 159 + margin-bottom: 6px; 150 150 151 - &:hover { 152 - transform: translateY(-2px); 153 - box-shadow: @shadow; 161 + i { 162 + color: @brand; 154 154 } 155 155 156 - .icon { 157 - display: flex; 158 - align-items: center; 159 - gap: 10px; 160 - padding-bottom: 6px; 161 - margin-bottom: 8px; 162 - border-bottom: 1px solid fade(@line, 60%); 163 - i { color: @brand; } 164 - h4 { margin: 0; line-height: 1.2; color: @text; } 165 - } 166 - 167 - p { 165 + h4 { 166 + /*font-weight: 700; */ 168 168 margin: 0; 169 - color: @ muted;170 - line-height: 1. 45;168 + color: @text; 169 + line-height: 1.2; 171 171 } 172 172 } 173 173 174 - /* Tablet (sm–md) – 2 per row */ 175 - @media (max-width: 991px) { 176 - .widget { 177 - flex: 0 0 48%; 178 - max-width: 48%; 179 - } 173 + /* Body paragraph */ 174 + p { 175 + color: @muted; 176 + margin: 0; 177 + line-height: 1.45; 180 180 } 181 - 182 - /* Mobile (xs) – 1 per row */ 183 - @media (max-width: 767px) { 184 - .widget { 185 - flex: 0 0 100%; 186 - max-width: 100%; 187 - } 188 - } 189 189 } 190 190 191 - /* SERVICES */ 192 - .services{193 - .services-grid {194 - margin-top:12px;195 - display:flex;196 - flex-wrap:wrap;197 - justify-content: space-between;181 + /* SERVICES */ 182 + /* --- Services grid --- */ 183 +.services-grid { 184 + display: grid; 185 + grid-template-columns: repeat(2, 1fr); 186 + gap: 32px 36px; 187 +} 198 198 199 - .service { 200 - box-sizing: border-box; 201 - margin-bottom: 24px; 189 +/* Service item */ 190 +.services-grid > article.service { 191 + display: grid; 192 + grid-template-columns: 48px 1fr; 193 + gap: 16px; 194 + padding: 18px 0; 195 + border-top: 1px solid rgba(0,0,0,0.08); 196 +} 202 202 203 - /* Desktop / tablet: 2 per row with space between */ 204 - flex: 0 0 48%; 205 - max-width: 48%; 198 +/* First row only: remove top border. 199 + Use nth-of-type to avoid XWiki DOM noise changing indexes. */ 200 +.services-grid > article.service:nth-of-type(-n + 2) { 201 + border-top: none; 202 +} 206 206 207 - display: flex; 208 - align-items: flex-start; 209 - gap: 16px; 204 +/* Icon badge */ 205 +.services-grid > article.service > i { 206 + width: 42px; 207 + height: 42px; 208 + border-radius: 50%; 209 + display: flex; 210 + align-items: center; 211 + justify-content: center; 212 + font-size: 18px; 213 + color: #008e78; 214 + background: rgba(0,142,120,0.08); 215 + margin-top: 3px; 216 +} 210 210 211 - .service-icon { 212 - width: 42px; 213 - height: 42px; 214 - border-radius: 50%; 215 - display: flex; 216 - align-items: center; 217 - justify-content: center; 218 - font-size: 18px; 219 - color: @brand; 220 - background: fade(@brand, 10%); 221 - margin-top: 3px; 222 - flex-shrink: 0; 223 - } 218 +/* Text */ 219 +.services-grid .body h3 { margin: 0 0 4px; font-size: 1.125rem; font-weight: 800; } 220 +.services-grid .body p { margin: 0 0 6px; color: #25333b; line-height: 1.5; } 221 +.services-grid .body ul { margin: .45rem 0 0; padding-left: 1.1rem; color: #2d3b43; } 222 +.services-grid .body li { margin: .25rem 0; line-height: 1.45; } 224 224 225 - .service-body { 226 - h4 { 227 - margin: 0 0 4px; 228 - font-size: 1.125rem; 229 - font-weight: 800; 230 - } 224 +/* Last item (Migrations): centered single row */ 225 +.services-grid > article.service.service--center { 226 + grid-column: 1 / -1; 227 + max-width: 680px; 228 + justify-self: center; 229 + border-top: 1px solid rgba(0,0,0,0.08); 230 +} 231 231 232 - p { 233 - margin: 0 0 6px; 234 - color: @text; 235 - line-height: 1.5; 236 - } 237 - 238 - ul { 239 - margin: .45rem 0 0; 240 - padding-left: 1.1rem; 241 - color: @muted; 242 - font-size: .95rem; 243 - } 244 - 245 - li { 246 - margin: .25rem 0; 247 - line-height: 1.45; 248 - } 249 - } 250 - } 251 - 252 - /* Mobile: stack services full width */ 253 - @media (max-width: 767px) { 254 - .service { 255 - flex: 0 0 100%; 256 - max-width: 100%; 257 - } 258 - } 259 - } 260 - } 261 - 232 +/* Responsive */ 233 +@media (max-width: 760px) { 234 + .services-grid { grid-template-columns: 1fr; gap: 20px; } 235 + .services-grid > article.service { grid-template-columns: 40px 1fr; } 236 + .services-grid > article.service > i { width: 36px; height: 36px; font-size: 16px; } 237 + .services-grid > article.service.service--center { max-width: 100%; } 238 + /* On mobile only the very first service should have no top border */ 239 + .services-grid > article.service:nth-of-type(1) { border-top: none; } 240 +} 262 262 /* METRICS */ 263 263 .metrics { 264 264 display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); ... ... @@ -309,6 +309,12 @@ 309 309 background-attachment: scroll; 310 310 } 311 311 291 + /* Fix possible grid or card overshoot */ 292 + .container { 293 + max-width: 100%; 294 + overflow-x: clip; /* hides subtle pixel overflow without scroll */ 295 + } 296 + 312 312 /* Safety for large paddings/margins that might extend */ 313 313 section, .widgets, .services, .metrics, .steps { 314 314 margin-left: auto;