Changes for page Home
Last modified by Alex Cotiugă on 2026/01/13 13:12
From version 5.2
edited by Alex Cotiugă
on 2025/11/12 13:58
on 2025/11/12 13:58
Change comment:
There is no comment for this version
To version 7.120
edited by Alex Cotiugă
on 2025/11/14 08:59
on 2025/11/14 08:59
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
-
... ... @@ -1,101 +1,244 @@ 1 1 {{velocity}} 2 +#*== Professional XWiki Services for Secure and Scalable Business Solutions == 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.*# 2 2 {{html clean="false"}} 3 -<div id="contentcontainer" class="agnease"> 4 - <!-- “Hero” equivalent --> 5 - <section class="hero"> 6 - <div class="container grid grid-2"> 7 - <div> 8 - <div class="badges"> 9 - <span class="chip">Professional XWiki Services</span> 10 - <span class="chip">Secure & Scalable</span> 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> 25 + </div> 11 11 </div> 12 - <h1>Engineering reliability in every XWiki environment</h1> 13 - <p class="lead">Upgrades, maintenance, integrations, and custom development — delivered with clarity and low risk. Agnease keeps XWiki stable, secure, and ready to grow.</p> 14 - <div class="hero-cta"> 15 - <a class="btn btn-primary" href="#contact">Request a proposal</a> 16 - <a class="btn btn-ghost" href="#services">View services</a> 17 - </div> 18 18 </div> 19 - <div> 20 - <div class="card"> 21 - <h3>At a glance</h3> 22 - <ul> 23 - <li>Low-downtime LTS upgrades</li> 24 - <li>Support plans with SLAs</li> 25 - <li>SSO/OIDC, Stripe, REST integrations</li> 26 - <li>Audits, recovery, performance tuning</li> 27 - </ul> 28 - </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="col-xs-12 col-sm-6 col-md-3"> 56 + <div class="widget" role="listitem"> 57 + <div class="icon" aria-hidden="true"> 58 + <i class="fa fa-$entry.icon"></i> 59 + <h4>$entry.title</h4> 60 + </div> 61 + <p>$entry.content</p> 62 + </div> 63 + </div> 64 + #end 29 29 </div> 30 30 </div> 31 31 </section> 68 + <!-- ================= SERVICES ================= --> 69 + #set ($servicesSectionData = [{ 70 + 'title': 'Upgrades', 71 + 'icon': 'refresh', 72 + 'content': 'Stay current with the latest XWiki LTS and keep your instance reliable.', 73 + 'items': [ 74 + 'Audit setup, extensions, and configurations', 75 + 'Test upgrades with backups and validation', 76 + 'Safe production rollout with minimal downtime' 77 + ] 78 + },{ 79 + 'title': 'Maintenance, Support & Recovery', 80 + 'icon': 'stethoscope', 81 + 'content': 'Ensure long-term stability and quick response when issues appear.', 82 + 'items': [ 83 + 'Monitoring and performance checks', 84 + 'Security patching, log analysis, triage', 85 + 'Issue recovery, data repair, hardening' 86 + ] 87 + },{ 88 + 'title': 'Development & Integrations', 89 + 'icon': 'cogs', 90 + 'content': 'Extend and connect XWiki to fit your workflow and systems.', 91 + 'items': [ 92 + 'Custom apps, macros, automation', 93 + 'SSO, REST APIs, LDAP, CRM links', 94 + 'Maintainable extensions for long-term use' 95 + ] 96 + },{ 97 + 'title': 'Hosting & Deployment', 98 + 'icon': 'cloud', 99 + 'content': 'Cloud-ready environments designed for reliability and performance.', 100 + 'items': [ 101 + 'Containerized deployment and TLS', 102 + 'Backups, restore strategy, observability', 103 + 'Optimization and load tuning' 104 + ] 105 + },{ 106 + 'title': 'Migrations to XWiki', 107 + 'icon': 'exchange', 108 + 'content': 'Move from Confluence, SharePoint, or MediaWiki to XWiki with full data integrity and structure.', 109 + 'items': [ 110 + 'Preserve hierarchy, attachments, and permissions', 111 + 'Convert macros, categories, and metadata for XWiki', 112 + 'Redirect old URLs and maintain SEO consistency' 113 + ] 114 + }]) 115 + <section class="services" aria-labelledby="services-title"> 116 + <div class="container"> 117 + <h2 id="services-title">Services</h2> 118 + <p class="lead"> 119 + All the XWiki services you need, delivered with precision and care 120 + </p> 32 32 33 - <!-- Services --> 34 - <section id="services"> 122 + #set ($servicesSize = $servicesSectionData.size()) 123 + <div class="row services-grid" role="list"> 124 + #foreach ($entry in $servicesSectionData) 125 + #set ($classes = "service col-xs-12 col-sm-6") 126 + ## If this is the last item and the number of services is odd, 127 + ## center it on its own row on small+ screens 128 + #if ($foreach.count == $servicesSize && ($servicesSize % 2) == 1) 129 + #set ($classes = "$classes col-sm-offset-3") 130 + #end 131 + <div class="$classes" role="listitem"> 132 + <div class="service-icon"> 133 + <i class="fa fa-$entry.icon" aria-hidden="true"></i> 134 + </div> 135 + <div class="service-body"> 136 + <h4>$entry.title</h4> 137 + <p>$entry.content</p> 138 + <ul> 139 + #foreach ($item in $entry.items) 140 + <li>$item</li> 141 + #end 142 + </ul> 143 + </div> 144 + </div> 145 + #end 146 + </div> 147 + </div> 148 + </section> 149 + <section id="contact" class="cta-section"> 35 35 <div class="container"> 36 - <h2>Services</h2> 37 - <p class="lead">Everything your XWiki needs — from a single expert partner.</p> 38 - <div class="grid grid-3"> 39 - <article class="card"> 40 - <h3>Upgrades & Migrations</h3> 41 - <p>Predictable paths to current LTS with rehearsed steps, backups, and rollback plans.</p> 42 - <ul><li>Version & extension audit</li><li>Pre-prod rehearsal</li><li>Rollback & backup plan</li></ul> 43 - </article> 44 - <article class="card"> 45 - <h3>Maintenance & Support</h3> 46 - <p>Health checks, security patches, bug triage, and fast incident investigation.</p> 47 - <ul><li>Monthly health report</li><li>Security updates applied</li><li>Response-time guarantees</li></ul> 48 - </article> 49 - <article class="card"> 50 - <h3>Custom Development</h3> 51 - <p>Macros, forms, workflows, and structured data to match how your teams work.</p> 52 - <ul><li>Task & review flows</li><li>Automation & notifications</li><li>UI/UX improvements</li></ul> 53 - </article> 54 - <article class="card"> 55 - <h3>Integrations</h3> 56 - <p>Connect XWiki with identity and business tools using maintainable patterns.</p> 57 - <ul><li>SSO / OIDC / SAML</li><li>Stripe payments</li><li>REST / Webhooks</li></ul> 58 - </article> 59 - <article class="card"> 60 - <h3>Hosting & Deployment</h3> 61 - <p>Cloud-ready setups with backups, observability, and performance tuning.</p> 62 - <ul><li>Architecture guidance</li><li>Backup & restore drills</li><li>Scaling & caching</li></ul> 63 - </article> 64 - <article class="card"> 65 - <h3>Audits & Recovery</h3> 66 - <p>Stabilize failing instances, recover features, and harden configuration.</p> 67 - <ul><li>Root-cause analysis</li><li>Configuration hardening</li><li>Actionable report</li></ul> 68 - </article> 151 + <p class="text-center contact-inline"> 152 + Need help with your XWiki? <a href="mailto:alex@agnease.com">Contact Agnease</a>. 153 + </p> 154 + </div> 155 + </section> 156 +#* 157 + <!-- ================= METRICS ================= --> 158 + <section aria-labelledby="metrics-title"> 159 + <div class="container"> 160 + <h2 id="metrics-title">Delivery at a glance</h2> 161 + <div class="metrics" role="list"> 162 + <div class="metric" role="listitem"> 163 + <div class="num">8–12h</div> 164 + <div class="label">Typical LTS upgrade window</div> 165 + </div> 166 + <div class="metric" role="listitem"> 167 + <div class="num"><1h</div> 168 + <div class="label">Average service downtime during upgrades</div> 169 + </div> 170 + <div class="metric" role="listitem"> 171 + <div class="num">24–48h</div> 172 + <div class="label">First response SLA (plans)</div> 173 + </div> 174 + <div class="metric" role="listitem"> 175 + <div class="num">10+ yrs</div> 176 + <div class="label">XWiki expertise</div> 177 + </div> 69 69 </div> 179 + <p class="lead" style="margin-top:.6rem">*for rehearsed, staged upgrades on supported environments.</p> 70 70 </div> 71 71 </section> 72 72 73 - <!-- P rocess-->74 - <section> 183 + <!-- ================= PROCESS ================= --> 184 + <section aria-labelledby="process-title"> 75 75 <div class="container"> 76 - <h2>Process</h2> 186 + <h2 id="process-title">Process</h2> 77 77 <p class="lead">Calm, predictable, and transparent from start to finish.</p> 78 78 <div class="steps"> 79 - <div class="step"><h3>1) Assess</h3><p>Review environment, extensions, constraints, and risks.</p></div> 80 - <div class="step"><h3>2) Plan</h3><p>Agree scope, milestones, downtime windows, and rollback checkpoints.</p></div> 81 - <div class="step"><h3>3) Deliver</h3><p>Execute, verify, document, and hand over.</p></div> 189 + <div class="step"> 190 + <h3>1) Assess</h3> 191 + <p>Review environment, extensions, constraints, and risks with no surprises.</p> 192 + </div> 193 + <div class="step"> 194 + <h3>2) Plan</h3> 195 + <p>Agree scope, milestones, downtime windows, and rollback checkpoints.</p> 196 + </div> 197 + <div class="step"> 198 + <h3>3) Deliver</h3> 199 + <p>Execute, verify, document, and hand over with actionable notes.</p> 200 + </div> 82 82 </div> 83 83 </div> 84 84 </section> 85 85 86 - <!-- CTAband-->87 - <section id=" contact">205 + <!-- ================= FAQ ================= --> 206 + <section class="faq" aria-labelledby="faq-title"> 88 88 <div class="container"> 89 - <div class="cta-band"> 90 - <div> 91 - <h3>Need a reliable plan for your XWiki?</h3> 92 - <p class="lead" style="margin:0">Upgrades, support, and integrations handled with low risk and clear communication.</p> 208 + <h2 id="faq-title">FAQ</h2> 209 + <details> 210 + <summary>How much downtime should we expect for an upgrade?</summary> 211 + <p>Most upgrades complete in a short maintenance window. For mission-critical wikis we rehearse and stage changes to minimize downtime.</p> 212 + </details> 213 + <details> 214 + <summary>Can you help if our wiki is already broken?</summary> 215 + <p>Yes. We start with an audit to stabilize the instance, recover missing features, and harden configuration.</p> 216 + </details> 217 + <details> 218 + <summary>Do you offer support plans?</summary> 219 + <p>Yes, from ad-hoc assistance to ongoing retainers with response-time guarantees and monthly health checks.</p> 220 + </details> 221 + </div> 222 + </section> 223 +*# 224 +#* <!-- ================= CTA ================= --> 225 + <section id="contact" aria-labelledby="contact-title" class="cta-section"> 226 + <div class="container"> 227 + <div class="row"> 228 + <div class="col-sm-12 text-center"> 229 + <h4 id="contact-title">Need a reliable plan for your XWiki?</h4> 230 + <p class="lead"> 231 + Keep your XWiki running smoothly and safely. Get in touch if you need assistance. 232 + </p> 233 + <a class="btn btn-primary" href="mailto:alex@agnease.com"> 234 + Contact Agnease 235 + </a> 93 93 </div> 94 - <a class="btn btn-primary" href="mailto:hello@agnease.com">Contact Agnease</a> 95 95 </div> 96 96 </div> 97 97 </section> 98 -</div> 240 + *# 241 +</main> 99 99 {{/html}} 100 100 #* 101 101 = XWiki Multi-Factor Authentication (MFA) Application =
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,48 +1,292 @@ 1 -/* Page: XWiki.AgneaseTheme (SSX) */ 2 -#contentcontainer.agnease { 3 - --brand:#00937D; --brand-strong:#007B6A; 4 - --text:#2D3A34; --muted:#5B6B64; 5 - --panel:#F7F9F8; --line:#E4ECE9; 6 - --radius:14px; --radius-sm:10px; 7 - --shadow:0 10px 30px rgba(0,0,0,.08); 8 - color:var(--text); font:16px/1.6 Inter, Segoe UI, Roboto, system-ui, -apple-system, Arial, sans-serif; 9 -} 1 +/* ========== Agnease Landing (LESS, scoped to .agnease-landing) ========== */ 2 +@brand: #00937D; 3 +@brand-strong: #007B6A; 4 +@text: #2D3A34; 5 +@muted: #5B6B64; 6 +@bg: #FFFFFF; 7 +@panel: #F7F9F8; 8 +@line: #E4ECE9; 9 +@radius: 16px; 10 +@radius-sm: 12px; 11 +@shadow-sm: 0 6px 20px rgba(0,0,0,.06); 12 +@shadow: 0 12px 36px rgba(0,0,0,.08); 13 +@maxw: 1140px; 10 10 11 -/* Headings & links */ 12 -#contentcontainer.agnease h1{font-size:clamp(1.8rem,2.5vw + .8rem,3rem);line-height:1.15;margin:.2rem 0 .5rem} 13 -#contentcontainer.agnease h2{font-size:clamp(1.4rem,1.4vw + .8rem,2rem);line-height:1.2;margin:.2rem 0 .4rem} 14 -#contentcontainer.agnease h3{font-size:1.1rem;margin:.2rem 0 .3rem} 15 -#contentcontainer.agnease .lead{color:var(--muted);max-width:72ch;margin:.35rem 0 .7rem} 16 -#contentcontainer.agnease a{color:var(--brand)} 17 -#contentcontainer.agnease a:hover{color:var(--brand-strong);text-decoration:underline} 15 +.agnease-landing { 16 + /* Base */ 17 + color: @text; 18 + font: 16px/1.6 Inter, Segoe UI, Roboto, system-ui, -apple-system, Arial, sans-serif; 18 18 19 -/* Sections & grid */ 20 -#contentcontainer.agnease section{padding:64px 0;border-top:1px solid var(--line)} 21 -#contentcontainer.agnease section:first-child{border-top:none} 22 -#contentcontainer.agnease .container{max-width:1140px;margin:auto;padding:0 20px} 23 -#contentcontainer.agnease .grid{display:grid;gap:18px} 24 -#contentcontainer.agnease .grid-2{grid-template-columns:1fr} 25 -#contentcontainer.agnease .grid-3{grid-template-columns:1fr} 26 -@media (min-width:840px){ 27 - #contentcontainer.agnease .grid-2{grid-template-columns:1.1fr .9fr} 28 - #contentcontainer.agnease .grid-3{grid-template-columns:repeat(3,1fr)} 29 -} 20 + a { 21 + color: @brand; 22 + text-decoration: none; 23 + &:hover { 24 + color: @brand-strong; 25 + text-decoration: underline; 26 + } 27 + } 30 30 31 -/* Components (chips, cards, steps, CTA band) */ 32 -#contentcontainer.agnease .chip{display:inline-block;background:var(--panel);border:1px solid var(--line);padding:.35rem .65rem;border-radius:999px;font-size:.82rem;color:var(--text)} 33 -#contentcontainer.agnease .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease} 34 -#contentcontainer.agnease .card:hover{transform:translateY(-2px)} 35 -#contentcontainer.agnease .card p{color:var(--muted);margin:0} 36 -#contentcontainer.agnease .card ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--muted)} 37 -#contentcontainer.agnease .steps{display:grid;gap:16px;grid-template-columns:1fr} 38 -@media (min-width:840px){ #contentcontainer.agnease .steps{grid-template-columns:repeat(3,1fr)} } 39 -#contentcontainer.agnease .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)} 40 -#contentcontainer.agnease .cta-band{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px} 29 + img { 30 + max-width: 100%; 31 + display: block; 32 + } 41 41 42 -/* Buttons */ 43 -#contentcontainer.agnease .btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.1rem;border-radius:12px;border:2px solid transparent;font-weight:650;letter-spacing:.2px;cursor:pointer;box-shadow:var(--shadow)} 44 -#contentcontainer.agnease .btn-primary{background:var(--brand);color:#fff} 45 -#contentcontainer.agnease .btn-primary:hover{background:var(--brand-strong)} 46 -#contentcontainer.agnease .btn-ghost{background:#fff;color:var(--brand);border-color:var(--brand)} 47 -#contentcontainer.agnease .btn-ghost:hover{color:var(--brand-strong);border-color:var(--brand-strong)} 34 + .lead { 35 + color: @muted; 36 + max-width: 72ch; 37 + } 48 48 39 + /* Use Bootstrap’s container padding to avoid overflow */ 40 + .container { 41 + max-width: @maxw; 42 + margin: 5px auto 0; 43 + padding: 0 15px; 44 + } 45 + 46 + /* Global sections */ 47 + section { 48 + padding: 32px 0; 49 + border-top: 1px solid @line; 50 + } 51 + section:first-of-type { 52 + border-top: none; 53 + } 54 + 55 + /* Buttons */ 56 + .btn { 57 + display: inline-flex; 58 + align-items: center; 59 + gap: .55rem; 60 + padding: .85rem 1.1rem; 61 + border-radius: 12px; 62 + border: 2px solid transparent; 63 + font-weight: 650; 64 + letter-spacing: .2px; 65 + cursor: pointer; 66 + box-shadow: @shadow-sm; 67 + 68 + &:focus-visible { 69 + outline: 3px solid @brand; 70 + outline-offset: 2px; 71 + } 72 + 73 + &-primary { 74 + background: @brand; 75 + color: #fff; 76 + &:hover, 77 + &:focus { 78 + background: @brand-strong; 79 + color: #fff; 80 + } 81 + } 82 + 83 + &-ghost { 84 + background: #fff; 85 + color: @brand; 86 + border-color: @brand; 87 + &:hover { 88 + color: @brand-strong; 89 + border-color: @brand-strong; 90 + } 91 + } 92 + } 93 + 94 + /* HERO (centered) */ 95 + .hero { 96 + overflow: hidden; /* contain gradients */ 97 + background-repeat: no-repeat; 98 + background-attachment: scroll; 99 + 100 + &.hero-centered { 101 + text-align: center; 102 + background: 103 + radial-gradient(50rem 18rem at 50% -10%, #E7FFF8 0%, transparent 60%), 104 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%); 105 + display: flex; 106 + align-items: center; 107 + justify-content: center; 108 + min-height: 350px; 109 + 110 + .hero-inner { 111 + margin: auto; 112 + display: flex; 113 + flex-direction: column; 114 + align-items: center; 115 + gap: 1rem; 116 + } 117 + 118 + .lead { 119 + color: @muted; 120 + margin: 0 auto 0.9rem; 121 + } 122 + 123 + .hero-cta { 124 + display: flex; 125 + gap: 0.8rem; 126 + flex-wrap: wrap; 127 + justify-content: center; 128 + margin-top: 0.3rem; 129 + } 130 + 131 + .benefits { 132 + display: flex; 133 + flex-wrap: wrap; 134 + justify-content: center; 135 + list-style: none; 136 + padding: 0; 137 + margin: 0.8rem 0 0; 138 + color: @muted; 139 + font-size: 14px; 140 + gap: 5px; 141 + 142 + li + li::before { 143 + content: "•"; 144 + margin-right: 5px; 145 + } 146 + 147 + /* Mobile: show bullets only between 1–2 and 3–4 */ 148 + @media (max-width: 640px) { 149 + li + li::before { 150 + content: none; 151 + } 152 + li:nth-child(1)::after, 153 + li:nth-child(3)::after { 154 + content: "•"; 155 + margin-left: 5px; 156 + } 157 + } 158 + } 159 + } 160 + } 161 + 162 + /* === WHY CHOOSE (widgets using flex) === */ 163 + .widgets { 164 + margin-top: 12px; 165 + display: grid; 166 + grid-template-columns: 1fr; 167 + grid-gap: 16px; // spacing between cards 168 + 169 + @media (min-width: 768px) { 170 + grid-template-columns: repeat(2, 1fr); 171 + } 172 + 173 + @media (min-width: 992px) { 174 + grid-template-columns: repeat(4, 1fr); 175 + } 176 + 177 + .widget { 178 + box-sizing: border-box; 179 + padding: 18px; 180 + background: #fff; 181 + border: 1px solid @line; 182 + border-radius: @radius; 183 + box-shadow: @shadow-sm; 184 + transition: transform .18s ease, box-shadow .18s ease; 185 + display: flex; 186 + flex-direction: column; 187 + height: 100%; 188 + 189 + &:hover { 190 + transform: translateY(-2px); 191 + box-shadow: @shadow; 192 + } 193 + 194 + .icon { 195 + display: flex; 196 + align-items: center; 197 + gap: 10px; 198 + padding-bottom: 6px; 199 + margin-bottom: 8px; 200 + border-bottom: 1px solid fade(@line, 60%); 201 + i { color: @brand; } 202 + h4 { margin: 0; line-height: 1.2; color: @text; } 203 + } 204 + 205 + p { 206 + margin: 0; 207 + color: @muted; 208 + line-height: 1.45; 209 + } 210 + } 211 + } 212 + 213 + /* SERVICES */ 214 + .services { 215 + .services-grid { 216 + margin-top: 12px; 217 + 218 + .service { 219 + margin-bottom: 24px; 220 + display: flex; 221 + align-items: flex-start; 222 + gap: 16px; 223 + 224 + .service-icon { 225 + width: 42px; 226 + height: 42px; 227 + border-radius: 50%; 228 + display: flex; 229 + align-items: center; 230 + justify-content: center; 231 + font-size: 18px; 232 + color: @brand; 233 + background: fade(@brand, 10%); 234 + margin-top: 3px; 235 + flex-shrink: 0; 236 + } 237 + 238 + .service-body { 239 + h4 { 240 + margin: 0 0 4px; 241 + font-size: 1.125rem; 242 + font-weight: 800; 243 + } 244 + 245 + p { 246 + margin: 0 0 6px; 247 + color: @text; 248 + line-height: 1.5; 249 + } 250 + 251 + ul { 252 + margin: .45rem 0 0; 253 + padding-left: 1.1rem; 254 + color: @muted; 255 + font-size: 13px; 256 + } 257 + 258 + li { 259 + margin: .25rem 0; 260 + line-height: 1.45; 261 + } 262 + } 263 + } 264 + } 265 + 266 + @media (max-width: 767px) { 267 + .services-grid { 268 + .service { 269 + margin-bottom: 20px; 270 + } 271 + 272 + .service-icon { 273 + width: 36px; 274 + height: 36px; 275 + font-size: 16px; 276 + } 277 + } 278 + } 279 + } 280 + 281 + /* CTA inline section at the end */ 282 + .cta-section { 283 + padding: 24px 0 16px; 284 + 285 + .contact-inline { 286 + margin: 0; 287 + color: @muted; 288 + a { color: @brand; } 289 + } 290 + } 291 +} 292 + - Content Type
-
... ... @@ -1,1 +1,1 @@ 1 - CSS1 +LESS